<template>
  <div class="dashboard-container">
    <!-- 高级动态背景 -->

    

    
    <!-- 键盘快捷键提示框 -->
    <div v-if="showKeyboardShortcuts" class="keyboard-shortcuts-modal" @click.self="showKeyboardShortcuts = false">
      <div class="shortcuts-content">
        <div class="shortcuts-header">
          <h3>键盘快捷键</h3>
          <button class="close-btn" @click="showKeyboardShortcuts = false">×</button>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">刷新所有数据</span>
          <div class="shortcut-keys">
            <span class="key">R</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">显示快捷键帮助</span>
          <div class="shortcut-keys">
            <span class="key">H</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">聚焦到温度传感器面板</span>
          <div class="shortcut-keys">
            <span class="key">T</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">聚焦到压力传感器面板</span>
          <div class="shortcut-keys">
            <span class="key">P</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">聚焦到设备状态面板</span>
          <div class="shortcut-keys">
            <span class="key">D</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">切换到全部异常标签</span>
          <div class="shortcut-keys">
            <span class="key">1</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">切换到温度异常标签</span>
          <div class="shortcut-keys">
            <span class="key">2</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">切换到压力异常标签</span>
          <div class="shortcut-keys">
            <span class="key">3</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">切换到心率异常标签</span>
          <div class="shortcut-keys">
            <span class="key">4</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">切换到雷达异常标签</span>
          <div class="shortcut-keys">
            <span class="key">A</span>
          </div>
        </div>
        <div class="shortcut-item">
          <span class="shortcut-desc">全屏切换</span>
          <div class="shortcut-keys">
            <span class="key">F</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 异常详情显示区域 -->
<div v-if="showAnomalyDetail && selectedAnomaly" 
     :class="['anomaly-detail-panel', { 'fade-out': isClosing }]"
     @mouseenter="clearAutoCloseTimer"
     @mouseleave="startAutoCloseTimer"
     :key="`anomaly-${selectedAnomaly.id}-${timerKey}`">
  <div class="detail-header">
    <h3>{{ selectedAnomaly.title }}</h3>
    <button class="close-btn" @click="closeAnomalyDetail">×</button>
  </div>
  <div class="detail-content" v-html="getAnomalyDetailHtml(selectedAnomaly)"></div>
  <div class="auto-close-indicator" v-if="!isClosing" :key="`indicator-${timerKey}`"></div>
</div>
    
    <!-- 高级头部 -->
    <header class="dashboard-header">
      <div class="header-content">
        <h1 class="dashboard-title">
          <span class="title-text">传感器数据中台</span>
          <div class="title-decoration"></div>
        </h1>
        <div class="dashboard-time">{{ currentTime }}</div>
      </div>
      <div class="header-stats">
        <div class="stat-item">
          <div class="stat-value">{{ deviceStats.online }}</div>
          <div class="stat-label">在线设备</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ anomalyCount }}</div>
          <div class="stat-label">异常数量</div>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="dashboard-content">
      <!-- 统计卡片区域 -->
      <section class="stats-cards">
        <div class="stat-card" v-for="(card, index) in statsCards" :key="index" :style="{ '--delay': index * 0.1 + 's' }">
          <div class="card-icon" :style="{ backgroundColor: card.color }">
            <i :class="card.icon"></i>
          </div>
          <div class="card-content">
            <div class="card-value">{{ card.value }}</div>
            <div class="card-label">{{ card.label }}</div>
          </div>
          <div class="card-chart">
            <div class="mini-chart" :ref="'miniChart' + index"></div>
          </div>
        </div>
      </section>
      
      <!-- 三列布局容器 -->
      <div class="three-column-layout">
        <!-- 左列 - 传感器面板 -->
        <div class="left-column">
          <!-- 温度传感器数据 -->
          <div id="temperature-panel" class="panel temperature-panel sensor-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-sunny"></i>
                <span>温度传感器数据</span>
              </div>
              <div class="header-right">
                <div class="panel-status">
                  <span :class="['status-dot', temperatureStatus]"></span>
                  {{ temperatureStatusText }}
                </div>
              </div>
            </div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="data-overview">
                <div class="data-item" v-for="(item, index) in temperatureOverview" :key="item.id" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                  <div class="data-label">{{ item.label }}</div>
                  <div class="data-trend" :class="item.trend">
                    <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
                    {{ item.change }}%
                  </div>
                </div>
              </div>
              <div class="chart-container" ref="temperatureChart">
                <!-- 高级数据波动效果 -->
                <div class="advanced-wave-effects">
                  <div class="wave-point" v-for="point in 12" :key="point" :style="{ '--delay': point * 0.2 + 's', '--left': (point * 8) + '%' }"></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 压力传感器数据 -->
          <div id="pressure-panel" class="panel pressure-panel sensor-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-s-data"></i>
                <span>压力传感器数据</span>
              </div>
              <div class="header-right">
                <div class="panel-status">
                  <span :class="['status-dot', pressureStatus]"></span>
                  {{ pressureStatusText }}
                </div>
              </div>
            </div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="data-overview">
                <div class="data-item" v-for="(item, index) in pressureOverview" :key="item.id" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                  <div class="data-label">{{ item.label }}</div>
                  <div class="data-trend" :class="item.trend">
                    <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
                    {{ item.change }}%
                  </div>
                </div>
              </div>
              <div class="chart-container" ref="pressureChart">
                <!-- 高级数据波动效果 -->
                <div class="advanced-wave-effects">
                  <div class="wave-point" v-for="point in 12" :key="point" :style="{ '--delay': point * 0.2 + 's', '--left': (point * 8) + '%' }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 中间列 - 更宽的列 -->
        <div class="center-column">
          <!-- 上方 - 异常数据 -->
          <div class="panel anomaly-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-warning-outline"></i>
                <span>异常数据</span>
              </div>
              <div class="header-right">
                <el-badge :value="anomalyCount" class="anomaly-badge" type="danger" />
              </div>
            </div>
            
            <!-- 右下角装饰 -->
            <div class="corner-decoration"></div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="anomaly-tabs">
                <div 
                  class="tab-item" 
                  :class="{ active: activeTab === 'all' }" 
                  @click="activeTab = 'all'"
                >
                  全部异常
                </div>
                <div 
                  class="tab-item" 
                  :class="{ active: activeTab === 'temperature' }" 
                  @click="activeTab = 'temperature'"
                >
                  温度异常
                </div>
                <div 
                  class="tab-item" 
                  :class="{ active: activeTab === 'pressure' }" 
                  @click="activeTab = 'pressure'"
                >
                  压力异常
                </div>
                <div 
                  class="tab-item" 
                  :class="{ active: activeTab === 'heartRate' }" 
                  @click="activeTab = 'heartRate'"
                >
                  心率异常
                </div>
                <div 
                  class="tab-item" 
                  :class="{ active: activeTab === 'radar' }" 
                  @click="activeTab = 'radar'"
                >
                  雷达异常
                </div>
              </div>
              <div class="anomaly-list">
                <div class="anomaly-item" v-for="(item, index) in filteredAnomalies" :key="item.id" :style="{ '--delay': index * 0.1 + 's' }" @click="handleAnomalyItemClick(item)">
                  <div class="anomaly-icon" :class="item.type">
                    <i :class="getAnomalyIcon(item.type)"></i>
                  </div>
                  <div class="anomaly-info">
                    <div class="anomaly-title">{{ item.title }}</div>
                    <div class="anomaly-desc">{{ item.description }}</div>
                    <div class="anomaly-time">{{ item.time }}</div>
                  </div>
                  <div class="anomaly-level" :class="item.level">
                    {{ item.levelText }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 下方 - 设备信息 -->
          <div id="device-panel" class="panel device-panel device-info-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-monitor"></i>
                <span>设备信息</span>
              </div>
              <div class="header-right">
                <el-button size="mini" type="primary" @click="refreshDeviceData">刷新</el-button>
              </div>
            </div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="device-stats">
                <div class="stat-item" v-for="(item, index) in deviceStatsItems" :key="index" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="stat-value">{{ item.value }}</div>
                  <div class="stat-label">{{ item.label }}</div>
                  <div class="stat-progress">
                    <div class="progress-bar" :style="{ width: item.percentage + '%', backgroundColor: item.color }"></div>
                  </div>
                  <div class="stat-percentage">{{ item.percentage }}%</div>
                </div>
              </div>
              
              <div class="device-list">
                <div class="device-item" v-for="(device, index) in deviceList" :key="device.id" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="device-info">
                    <div class="device-name">{{ device.deviceSn || `设备${device.id}` }}</div>
                    <div class="device-id">ID: {{ device.id }}</div>
                  </div>
                  <div class="device-status" :class="device.status">
                    <span class="status-dot" :class="device.statusClass"></span>
                    {{ device.statusText }}
                  </div>
                  <div class="device-actions">
                    <el-button size="mini" type="text" @click="viewDeviceDetails(device)">详情</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右列 - 传感器面板 -->
        <div class="right-column">
          <!-- 雷达传感器数据 -->
          <div class="panel radar-panel sensor-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-s-grid"></i>
                <span>雷达传感器数据</span>
              </div>
              <div class="header-right">
                <div class="panel-status">
                  <span :class="['status-dot', radarStatus]"></span>
                  {{ radarStatusText }}
                </div>
              </div>
            </div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="data-overview">
                <div class="data-item" v-for="(item, index) in radarOverview" :key="item.id" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                  <div class="data-label">{{ item.label }}</div>
                  <div class="data-trend" :class="item.trend">
                    <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
                    {{ item.change }}%
                  </div>
                </div>
              </div>
              <div class="chart-container" ref="radarChart">
                <div class="advanced-wave-effects">
                  <div class="wave-point" v-for="point in 12" :key="point" :style="{ '--delay': point * 0.2 + 's' }"></div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 心率传感器数据 -->
          <div class="panel heart-rate-panel sensor-panel">
            <div class="panel-header">
              <div class="header-left">
                <i class="el-icon-first-aid-kit"></i>
                <span>心率传感器数据</span>
              </div>
              <div class="header-right">
                <div class="panel-status">
                  <span :class="['status-dot', heartRateStatus]"></span>
                  {{ heartRateStatusText }}
                </div>
              </div>
            </div>
            
            <!-- 高级数据流动效果 -->
            <div class="advanced-data-flow">
              <div class="flow-line" v-for="line in 3" :key="line" :style="{ '--delay': line * 0.3 + 's' }"></div>
              <div class="flow-particle" v-for="particle in 8" :key="particle" :style="{ '--delay': particle * 0.4 + 's' }"></div>
            </div>
            
            <div class="panel-content">
              <div class="data-overview">
                <div class="data-item" v-for="(item, index) in heartRateOverview" :key="item.id" :style="{ '--delay': index * 0.1 + 's' }">
                  <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                  <div class="data-label">{{ item.label }}</div>
                  <div class="data-trend" :class="item.trend">
                    <i :class="item.trend === 'up' ? 'el-icon-top' : 'el-icon-bottom'"></i>
                    {{ item.change }}%
                  </div>
                </div>
              </div>
              <div class="chart-container" ref="heartRateChart">
                <div class="advanced-wave-effects">
                  <div class="wave-point" v-for="point in 12" :key="point" :style="{ '--delay': point * 0.2 + 's' }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    
    <!-- 设备详情对话框 -->
    <el-dialog
      title="设备详情"
      :visible.sync="deviceDetailDialog.visible"
      width="60%"
      :before-close="closeDeviceDetailDialog">
      <div class="device-detail" v-if="deviceDetailDialog.device">
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">设备ID</div>
            <div class="detail-value">{{ deviceDetailDialog.device.id }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">设备序列号</div>
            <div class="detail-value">{{ deviceDetailDialog.device.deviceSn || '未知' }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">设备型号</div>
            <div class="detail-value">{{ deviceDetailDialog.device.model || '未知' }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">MAC地址</div>
            <div class="detail-value">{{ deviceDetailDialog.device.macAddress || '未知' }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">固件版本</div>
            <div class="detail-value">{{ deviceDetailDialog.device.firmwareVersion || '未知' }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">关联用户ID</div>
            <div class="detail-value">{{ deviceDetailDialog.device.userId || '未关联' }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">设备状态</div>
            <div class="detail-value">
              <span class="status-dot" :class="deviceDetailDialog.device.statusClass"></span>
              {{ deviceDetailDialog.device.statusText }}
            </div>
          </div>
          <div class="detail-item">
            <div class="detail-label">最后在线时间</div>
            <div class="detail-value">{{ deviceDetailDialog.device.lastSeenAt || '未知' }}</div>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-item">
            <div class="detail-label">创建时间</div>
            <div class="detail-value">{{ deviceDetailDialog.device.createTime || '未知' }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">更新时间</div>
            <div class="detail-value">{{ deviceDetailDialog.device.updateTime || '未知' }}</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDeviceDetailDialog">关闭</el-button>
        <el-button type="primary" @click="refreshDeviceDetail">刷新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { listTemperatureSensor } from "@/api/system/temperatureSensor"
import { listPressureSensor } from "@/api/system/pressureSensor"
import { listHeartRateSensor } from "@/api/system/heartRateSensor"
import { listRadarSensor } from "@/api/system/radarSensor"
import { listDevice } from "@/api/system/device"

export default {
  name: "DataDashboard",
  data() {
    return {
      currentTime: '',
      timer: null,
      activeTab: 'all',
      
      // 温度传感器数据
      temperatureData: {
        current: 0,
        average: 0,
        max: 0,
        min: 0,
        historyData: []
      },
      temperatureStatus: 'normal',
      temperatureStatusText: '正常',
      temperatureOverview: [
        { id: 1, label: '当前温度', value: 0, unit: '°C', trend: 'up', change: 2.3 },
        { id: 2, label: '平均温度', value: 0, unit: '°C', trend: 'down', change: 1.5 },
        { id: 3, label: '最高温度', value: 0, unit: '°C', trend: 'up', change: 4.2 },
        { id: 4, label: '最低温度', value: 0, unit: '°C', trend: 'down', change: 0.8 }
      ],
      
      // 压力传感器数据
      pressureData: {
        current: 0,
        average: 0,
        max: 0,
        min: 0,
        historyData: []
      },
      pressureStatus: 'normal',
      pressureStatusText: '正常',
      pressureOverview: [
        { id: 1, label: '当前压力', value: 0, unit: ' kPa', trend: 'up', change: 3.1 },
        { id: 2, label: '平均压力', value: 0, unit: ' kPa', trend: 'down', change: 1.8 },
        { id: 3, label: '最高压力', value: 0, unit: ' kPa', trend: 'up', change: 5.2 },
        { id: 4, label: '最低压力', value: 0, unit: ' kPa', trend: 'down', change: 1.2 }
      ],
      
      // 雷达传感器数据
      radarData: {
        currentEvents: 0,
        totalEvents: 0,
        detectionRate: 0,
        accuracy: 0,
        historyData: []
      },
      radarStatus: 'normal',
      radarStatusText: '正常',
      radarOverview: [
        { id: 1, label: '当前事件', value: 0, unit: '', trend: 'up', change: 5.2 },
        { id: 2, label: '总事件数', value: 0, unit: '', trend: 'up', change: 12.8 },
        { id: 3, label: '检测率', value: 0, unit: '%', trend: 'down', change: 2.1 },
        { id: 4, label: '准确率', value: 0, unit: '%', trend: 'up', change: 3.7 }
      ],
      
      // 心率传感器数据
      heartRateData: {
        current: 0,
        average: 0,
        max: 0,
        min: 0,
        historyData: []
      },
      heartRateStatus: 'normal',
      heartRateStatusText: '正常',
      heartRateOverview: [
        { id: 1, label: '当前心率', value: 0, unit: ' bpm', trend: 'up', change: 2.3 },
        { id: 2, label: '平均心率', value: 0, unit: ' bpm', trend: 'down', change: 1.5 },
        { id: 3, label: '最高心率', value: 0, unit: ' bpm', trend: 'up', change: 4.2 },
        { id: 4, label: '最低心率', value: 0, unit: ' bpm', trend: 'down', change: 0.8 }
      ],
      
      // 设备信息
      deviceStats: {
        total: 0,
        online: 0,
        offline: 0,
        warning: 0
      },
      deviceList: [],
      
      // 异常数据
      anomalyCount: 0,
      anomalies: [],
      anomalyStats: {
        temperature: 0,
        pressure: 0,
        heartRate: 0,
        radar: 0
      },
      
      // 图表实例
      temperatureChart: null,
      pressureChart: null,
      radarChart: null,
      heartRateChart: null,
      
      // 粒子数据
      particles: [],
      
      // 键盘快捷键提示框状态
      showKeyboardShortcuts: false,
      
      // 设备详情对话框
      deviceDetailDialog: {
        visible: false,
        device: null
      },
      
      // 当前聚焦的面板
      currentFocusedPanel: null,
      
      // 面板布局定义
      panelLayout: [
        // 左列
        ['temperature-panel', 'pressure-panel'],
        // 中列
        ['anomaly-panel', 'device-panel'],
        // 右列
        ['radar-panel', 'heart-rate-panel']
      ],
      
      // 异常详情显示
      selectedAnomaly: null,
      showAnomalyDetail: false,
      isClosing: false,
      autoCloseTimer: null,
      timerKey: 0,
      
      // 自动滚动定时器
      autoScrollTimer: null
    }
  },
  computed: {
    filteredAnomalies() {
      if (this.activeTab === 'all') {
        return this.anomalies
      } else {
        return this.anomalies.filter(item => item.type === this.activeTab)
      }
    },
    deviceStatsItems() {
      const total = this.deviceStats.total || 1;
      return [
        {
          label: '设备总数',
          value: this.deviceStats.total,
          percentage: 100,
          color: '#409EFF'
        },
        {
          label: '在线设备',
          value: this.deviceStats.online,
          percentage: Math.round((this.deviceStats.online / total) * 100),
          color: '#67C23A'
        },
        {
          label: '离线设备',
          value: this.deviceStats.offline,
          percentage: Math.round((this.deviceStats.offline / total) * 100),
          color: '#F56C6C'
        },
        {
          label: '警告设备',
          value: this.deviceStats.warning,
          percentage: Math.round((this.deviceStats.warning / total) * 100),
          color: '#E6A23C'
        }
      ]
    }
  },
  mounted() {
    this.initTime()
    this.initCharts()
    this.initParticles()
    this.initKeyboardShortcuts()
    this.fetchAllData()
    
    // 设置异常数据面板动画
    this.$nextTick(() => {
      this.setupAnomalyPanelIntersectionObserver()
    })
    
    // 设置定时刷新
    this.timer = setInterval(() => {
      this.updateTime()
      this.fetchAllData()
    }, 30000) // 30秒刷新一次
    
    // 进入页面时立即滚动到底部
    this.$nextTick(() => {
      this.scrollToBottom()
    })
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    
    // 清除异常详情自动关闭定时器
    this.clearAutoCloseTimer();
    
    // 清除自动滚动定时器
    if (this.autoScrollTimer) {
      clearTimeout(this.autoScrollTimer)
    }
    
    // 移除键盘事件监听器
    this.removeKeyboardShortcuts()
    
    // 销毁图表实例
    if (this.temperatureChart) {
      this.temperatureChart.dispose()
    }
    if (this.pressureChart) {
      this.pressureChart.dispose()
    }
    if (this.radarChart) {
      this.radarChart.dispose()
    }
    if (this.heartRateChart) {
      this.heartRateChart.dispose()
    }
  },
  methods: {
    // 滚动到页面底部
    scrollToBottom() {
      // 清除之前的定时器
      if (this.autoScrollTimer) {
        clearTimeout(this.autoScrollTimer)
      }
      
      // 执行滚动
      window.scrollTo({
        top: document.body.scrollHeight,
        behavior: 'smooth'
      });
      
      // 设置5秒后再次滚动
      this.autoScrollTimer = setTimeout(() => {
        this.scrollToBottom()
      }, 5000)
    },
    
    // 初始化时间
    initTime() {
      this.updateTime()
    },
    
    // 更新时间
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    
    // 初始化图表
    initCharts() {
      this.$nextTick(() => {
        this.temperatureChart = echarts.init(this.$refs.temperatureChart)
        this.pressureChart = echarts.init(this.$refs.pressureChart)
        this.radarChart = echarts.init(this.$refs.radarChart)
        this.heartRateChart = echarts.init(this.$refs.heartRateChart)
        
        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
          this.temperatureChart.resize()
          this.pressureChart.resize()
          this.radarChart.resize()
          this.heartRateChart.resize()
        })
      })
    },
    
    // 初始化粒子
    initParticles() {
      // 创建50个随机粒子
      const particleCount = 50
      this.particles = []
      
      for (let i = 0; i < particleCount; i++) {
        this.particles.push({
          id: i,
          x: Math.random() * 100,
          y: Math.random() * 100,
          size: Math.random() * 4 + 1,
          duration: Math.random() * 20 + 10,
          delay: Math.random() * 5
        })
      }
    },
    
    // 初始化键盘快捷键
    initKeyboardShortcuts() {
      // 添加键盘事件监听器
      document.addEventListener('keydown', this.handleKeyDown)
      
      // 显示快捷键提示
      // this.$notify({
      //   title: '键盘快捷键',
      //   message: 'P 全屏',
      //   type: 'info',
      //   duration: 3000,
      //   position: 'bottom-right'
      // })
    },
    
    // 移除键盘快捷键
    removeKeyboardShortcuts() {
      // 移除键盘事件监听器
      document.removeEventListener('keydown', this.handleKeyDown)
    },
    
    // 处理键盘事件
    handleKeyDown(event) {
      // 忽略在输入框中的按键
      if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
        return
      }
      
      // 阻止默认行为
      if (['1', '2', '3', '4', '5'].includes(event.key)) {
        event.preventDefault()
      }
      
      switch (event.key) {
        case '1':
          // 切换到全部异常标签
          this.switchToTab('all')
          break
          
        case '2':
          // 切换到温度异常标签
          this.switchToTab('temperature')
          break
          
        case '3':
          // 切换到压力异常标签
          this.switchToTab('pressure')
          break
          
        case '4':
          // 切换到心率异常标签
          this.switchToTab('heartRate')
          break
          
        case '5':
          // 切换到雷达异常标签
          this.switchToTab('radar')
          break
      }
    },
    
    // 面板导航
    navigatePanels(direction) {
      // 如果没有当前聚焦的面板，默认聚焦到第一个面板
      if (!this.currentFocusedPanel) {
        this.focusToPanelById('temperature-panel')
        return
      }
      
      // 获取当前面板的位置
      const currentPanelPosition = this.getPanelPosition(this.currentFocusedPanel)
      if (!currentPanelPosition) {
        this.focusToPanelById('temperature-panel')
        return
      }
      
      let nextPanelId = null
      
      switch (direction) {
        case 'up':
          // 向上导航（同一列的上一行）
          if (currentPanelPosition.row > 0) {
            nextPanelId = this.panelLayout[currentPanelPosition.row - 1][currentPanelPosition.col]
          }
          break
          
        case 'down':
          // 向下导航（同一列的下一行）
          if (currentPanelPosition.row < this.panelLayout.length - 1) {
            nextPanelId = this.panelLayout[currentPanelPosition.row + 1][currentPanelPosition.col]
          }
          break
          
        case 'left':
          // 向左导航（同一行的左一列）
          if (currentPanelPosition.col > 0) {
            nextPanelId = this.panelLayout[currentPanelPosition.row][currentPanelPosition.col - 1]
          }
          break
          
        case 'right':
          // 向右导航（同一行的右一列）
          if (currentPanelPosition.col < this.panelLayout[0].length - 1) {
            nextPanelId = this.panelLayout[currentPanelPosition.row][currentPanelPosition.col + 1]
          }
          break
          
        case 'next':
          // 循环到下一个面板（从左到右，从上到下）
          const totalPanels = this.panelLayout.flat().length
          const currentIndex = this.panelLayout.flat().indexOf(this.currentFocusedPanel)
          const nextIndex = (currentIndex + 1) % totalPanels
          nextPanelId = this.panelLayout.flat()[nextIndex]
          break
      }
      
      // 如果找到了下一个面板，则聚焦到它
      if (nextPanelId) {
        this.focusToPanelById(nextPanelId)
      }
    },
    
    // 获取面板在布局中的位置
    getPanelPosition(panelId) {
      for (let row = 0; row < this.panelLayout.length; row++) {
        for (let col = 0; col < this.panelLayout[row].length; col++) {
          if (this.panelLayout[row][col] === panelId) {
            return { row, col }
          }
        }
      }
      return null
    },
    
    // 根据ID聚焦到面板
    focusToPanelById(panelId) {
      // 移除之前聚焦的面板的高亮效果
      if (this.currentFocusedPanel) {
        const prevElement = document.getElementById(this.currentFocusedPanel)
        if (prevElement) {
          prevElement.classList.remove('keyboard-focus')
        }
      }
      
      // 获取面板元素
      const element = document.getElementById(panelId)
      if (element) {
        // 设置当前聚焦的面板
        this.currentFocusedPanel = panelId
        
        // 添加高亮效果
        element.classList.add('keyboard-focus')
        
        // 滚动到元素
        element.scrollIntoView({ behavior: 'smooth', block: 'center' })
        
        // 获取面板名称
        let panelName = ''
        switch (panelId) {
          case 'temperature-panel':
            panelName = '温度传感器'
            break
          case 'pressure-panel':
            panelName = '压力传感器'
            break
          case 'anomaly-panel':
            panelName = '异常数据'
            break
          case 'device-panel':
            panelName = '设备信息'
            break
          case 'radar-panel':
            panelName = '雷达传感器'
            break
          case 'heart-rate-panel':
            panelName = '心率传感器'
            break
        }
        
        // 显示提示
        this.$message({
          message: `已聚焦到${panelName}面板`,
          type: 'success',
          duration: 2000
        })
      }
    },
    
    // 激活当前聚焦的面板
    activateCurrentPanel() {
      if (!this.currentFocusedPanel) {
        this.$message({
          message: '没有聚焦的面板',
          type: 'warning',
          duration: 2000
        })
        return
      }
      
      // 根据面板类型执行不同的激活操作
      switch (this.currentFocusedPanel) {
        case 'temperature-panel':
        case 'pressure-panel':
        case 'radar-panel':
        case 'heart-rate-panel':
          // 传感器面板：刷新对应的数据
          this.refreshSensorData(this.currentFocusedPanel.replace('-panel', ''))
          break
          
        case 'anomaly-panel':
          // 异常面板：切换到下一个标签
          const tabs = ['all', 'temperature', 'pressure', 'heartRate', 'radar']
          const currentIndex = tabs.indexOf(this.activeTab)
          const nextIndex = (currentIndex + 1) % tabs.length
          this.switchToTab(tabs[nextIndex])
          break
          
        case 'device-panel':
          // 设备面板：刷新设备数据
          this.refreshDeviceData()
          break
      }
    },
    
    // 刷新传感器数据
    refreshSensorData(sensorType) {
      let sensorName = ''
      switch (sensorType) {
        case 'temperature':
          sensorName = '温度'
          this.fetchTemperatureData()
          break
        case 'pressure':
          sensorName = '压力'
          this.fetchPressureData()
          break
        case 'radar':
          sensorName = '雷达'
          this.fetchRadarData()
          break
        case 'heartRate':
          sensorName = '心率'
          this.fetchHeartRateData()
          break
      }
      
      this.$message({
        message: `${sensorName}传感器数据已刷新`,
        type: 'success',
        duration: 2000
      })
    },
    
    // 刷新设备数据
    refreshDeviceData() {
      // 这里可以添加刷新设备数据的逻辑
      // 目前只是模拟刷新
      this.deviceStats.onlineDevices = Math.floor(Math.random() * 50) + 100
      this.deviceStats.offlineDevices = Math.floor(Math.random() * 10) + 5
      this.deviceStats.anomalyCount = Math.floor(Math.random() * 20) + 10
      
      this.$message({
        message: '设备数据已刷新',
        type: 'success',
        duration: 2000
      })
    },
    
    // 显示快捷键帮助
    showKeyboardHelp() {
      this.$notify({
        title: '键盘快捷键',
        dangerouslyUseHTMLString: true,
        message: `
          <div style="line-height: 1.8;">
            <div><strong>1</strong> - 切换到全部异常标签</div>
            <div><strong>2</strong> - 切换到温度异常标签</div>
            <div><strong>3</strong> - 切换到压力异常标签</div>
            <div><strong>4</strong> - 切换到心率异常标签</div>
            <div><strong>5</strong> - 切换到雷达异常标签</div>
          </div>
        `,
        duration: 8000,
        position: 'bottom-right'
      })
    },
    
    // 聚焦到指定面板
    focusToPanel(panelType) {
      let elementId = ''
      let panelName = ''
      
      switch (panelType) {
        case 'temperature':
          elementId = 'temperature-panel'
          panelName = '温度传感器'
          break
        case 'pressure':
          elementId = 'pressure-panel'
          panelName = '压力传感器'
          break
        case 'device':
          elementId = 'device-panel'
          panelName = '设备状态'
          break
      }
      
      if (elementId) {
        const element = document.getElementById(elementId)
        if (element) {
          // 添加高亮效果
          element.classList.add('keyboard-focus')
          
          // 滚动到元素
          element.scrollIntoView({ behavior: 'smooth', block: 'center' })
          
          // 显示提示
          this.$message({
            message: `已聚焦到${panelName}面板`,
            type: 'success',
            duration: 2000
          })
          
          // 3秒后移除高亮效果
          setTimeout(() => {
            element.classList.remove('keyboard-focus')
          }, 3000)
        }
      }
    },
    
    // 切换到指定标签
    switchToTab(tabType) {
      if (['all', 'temperature', 'pressure', 'heartRate', 'radar'].includes(tabType)) {
        this.activeTab = tabType
        
        // 添加标签切换动画
        this.animateTabSwitch()
        
        // 获取标签名称
        let tabName = ''
        switch (tabType) {
          case 'all':
            tabName = '全部'
            break
          case 'temperature':
            tabName = '温度'
            break
          case 'pressure':
            tabName = '压力'
            break
          case 'heartRate':
            tabName = '心率'
            break
          case 'radar':
            tabName = '雷达'
            break
        }
        
        // 显示提示
        this.$message({
          message: `已切换到${tabName}异常标签`,
          type: 'success',
          duration: 2000
        })
      }
    },
    
    // 标签切换动画
    animateTabSwitch() {
      // 获取异常数据面板元素
      const anomalyPanel = document.querySelector('.anomaly-panel')
      if (anomalyPanel) {
        // 添加数据更新动画类
        anomalyPanel.classList.add('data-updated')
        
        // 动画结束后移除类
        setTimeout(() => {
          anomalyPanel.classList.remove('data-updated')
        }, 800)
      }
      
      // 为异常列表项添加交错动画
      const anomalyItems = document.querySelectorAll('.anomaly-item')
      anomalyItems.forEach((item, index) => {
        // 重置动画
        item.style.animation = 'none'
        item.style.opacity = '0'
        
        // 延迟应用动画
        setTimeout(() => {
          item.style.animation = `anomaly-item-fade-in 0.5s ease-out forwards`
          item.style.animationDelay = `${index * 0.1}s`
          item.style.opacity = '1'
        }, 100)
      })
    },
    
    // 异常数据项点击处理
    handleAnomalyItemClick(anomaly) {
      // 添加点击反馈动画
      event.currentTarget.classList.add('clicked')
      
      // 先清除所有定时器
      this.clearAutoCloseTimer();
      
      // 如果是同一个异常且面板已显示，则重置定时器
      if (this.selectedAnomaly && this.selectedAnomaly.id === anomaly.id && this.showAnomalyDetail) {
        // 重置关闭状态
        this.isClosing = false;
        // 启动新的定时器
        this.startAutoCloseTimer();
      } else {
        // 设置选中的异常数据
        this.selectedAnomaly = anomaly;
        this.showAnomalyDetail = true;
        this.isClosing = false;
        
        // 启动自动关闭定时器（8秒后自动关闭）
        this.startAutoCloseTimer();
      }
      
      // 移除点击反馈类
      setTimeout(() => {
        event.currentTarget.classList.remove('clicked')
      }, 300)
    },
    
    // 获取异常详情HTML
    getAnomalyDetailHtml(anomaly) {
      const levelColor = anomaly.level === 'high' ? '#F56C6C' : 
                         anomaly.level === 'medium' ? '#E6A23C' : '#67C23A';
      
      let html = `
        <div style="line-height: 1.6;">
          <div><strong>描述:</strong> ${anomaly.description}</div>
          <div><strong>时间:</strong> ${anomaly.time}</div>
          <div><strong>级别:</strong> 
            <span style="color: ${levelColor}">${anomaly.levelText}</span>
          </div>
      `;
      
      // 如果是雷达异常且有原始数据，添加原始数据信息
      if (anomaly.type === 'radar' && anomaly.rawData) {
        html += `
          <div><strong>原始数据:</strong> 
            <pre style="background-color: #ffffff; color: #000000; padding: 8px; border-radius: 4px; margin-top: 5px; font-size: 12px; white-space: pre-wrap;">${JSON.stringify(anomaly.rawData, null, 2)}</pre>
          </div>
        `;
      }
      
      // 如果有值信息，添加值信息
      if (anomaly.value !== undefined && anomaly.value !== null) {
        html += `<div><strong>数值:</strong> ${anomaly.value}</div>`;
      }
      
      // 为其他异常数据（非雷达）额外显示数值行
      if (anomaly.type !== 'radar' && anomaly.value !== undefined && anomaly.value !== null) {
        html += `<div style="margin-top: 8px; padding: 8px; background-color: rgba(96, 165, 250, 0.1); border-radius: 4px; border-left: 3px solid #60a5fa;">
          <strong style="color: #60a5fa;">数值详情:</strong> ${anomaly.value}
        </div>`;
      }
      
      html += '</div>';
      return html;
    },
    
    // 关闭异常详情
    closeAnomalyDetail() {
      this.isClosing = true;
      
      // 清除自动关闭定时器
      this.clearAutoCloseTimer();
      
      // 延迟隐藏，让动画完成
      setTimeout(() => {
        this.showAnomalyDetail = false;
        this.selectedAnomaly = null;
        this.isClosing = false;
      }, 300); // 与动画时长一致
    },
    
    // 启动自动关闭定时器
    startAutoCloseTimer() {
      // 清除之前的定时器
      this.clearAutoCloseTimer();
      
      // 增加timerKey，强制重新渲染倒计时指示器
      this.timerKey++;
      
      // 设置新的定时器，8秒后自动关闭
      this.autoCloseTimer = setTimeout(() => {
        this.closeAnomalyDetail();
      }, 8000);
    },
    
    // 清除自动关闭定时器
    clearAutoCloseTimer() {
      // 清除自动关闭定时器
      if (this.autoCloseTimer) {
        clearTimeout(this.autoCloseTimer);
        this.autoCloseTimer = null;
      }
      
      // 确保关闭状态被重置
      if (this.isClosing) {
        this.isClosing = false;
      }
    },
    
    // 异常数据面板进入视窗动画
    setupAnomalyPanelIntersectionObserver() {
      const anomalyPanel = document.querySelector('.anomaly-panel')
      if (anomalyPanel) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              // 面板进入视窗时触发动画
              entry.target.classList.add('in-viewport')
              
              // 为面板内容添加动画
              const panelContent = entry.target.querySelector('.panel-content')
              if (panelContent) {
                panelContent.style.animation = 'content-fade-in 1s ease-out forwards'
              }
              
              // 为标签页添加动画
              const tabs = entry.target.querySelector('.anomaly-tabs')
              if (tabs) {
                tabs.style.animation = 'tabs-slide-in 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards'
              }
              
              // 为列表添加动画
              const list = entry.target.querySelector('.anomaly-list')
              if (list) {
                list.style.animation = 'list-fade-in 1s ease-out forwards'
              }
            }
          })
        }, {
          threshold: 0.1
        })
        
        observer.observe(anomalyPanel)
      }
    },
    
    // 异常数据更新动画
    animateAnomalyDataUpdate() {
      // 获取异常数据面板
      const anomalyPanel = document.querySelector('.anomaly-panel')
      if (anomalyPanel) {
        // 添加数据更新动画类
        anomalyPanel.classList.add('data-updated')
        
        // 获取异常徽章
        const badge = anomalyPanel.querySelector('.anomaly-badge')
        if (badge) {
          // 添加徽章脉冲动画
          badge.style.animation = 'none'
          setTimeout(() => {
            badge.style.animation = 'badge-pulse 2s ease-in-out infinite'
          }, 100)
        }
        
        // 动画结束后移除类
        setTimeout(() => {
          anomalyPanel.classList.remove('data-updated')
        }, 800)
      }
    },
    
    // 全屏切换
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().then(() => {
          this.$message({
            message: '已进入全屏模式',
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          this.$message.error(`无法进入全屏模式: ${err.message}`)
        })
      } else {
        document.exitFullscreen().then(() => {
          this.$message({
            message: '已退出全屏模式',
            type: 'info',
            duration: 2000
          })
        }).catch(err => {
          this.$message.error(`无法退出全屏模式: ${err.message}`)
        })
      }
    },
    
    // 获取所有数据
    fetchAllData() {
      this.fetchTemperatureData()
      this.fetchPressureData()
      this.fetchRadarData()
      this.fetchHeartRateData()
      this.fetchDeviceData()
      // 异常数据直接从各传感器数据中获取，不再单独调用fetchAnomalyData
    },
    
    // 获取温度传感器数据
    async fetchTemperatureData() {
      try {
        // 导入温度传感器API
        const { listTemperatureSensor } = await import('@/api/system/temperatureSensor');
        const response = await listTemperatureSensor({
          pageNum: 1,
          pageSize: 100
        });
        
        if (response.code === 200 && response.rows && response.rows.length > 0) {
          // 处理温度数据，基于实际表结构
          const tempData = response.rows;
          // 按record_time降序排序，获取最新数据
          tempData.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
          const latestData = tempData[0]; // 获取最新数据
          
          // 计算统计数据
          const temperatures = tempData.map(item => parseFloat(item.temperature || 0));
          const avgTemp = temperatures.reduce((sum, temp) => sum + temp, 0) / temperatures.length;
          
          // 基于实际温度范围设置阈值
          const normalMin = 20.0; // 正常温度最低值
          const normalMax = 38.0; // 正常温度最高值
          const warningMin = 18.0; // 警告温度最低值
          const warningMax = 40.0; // 警告温度最高值
          
          const normalCount = temperatures.filter(temp => temp >= normalMin && temp <= normalMax).length;
          const warningCount = temperatures.filter(temp => (temp >= warningMin && temp < normalMin) || (temp > normalMax && temp <= warningMax)).length;
          const abnormalCount = temperatures.filter(temp => temp < warningMin || temp > warningMax).length;
          
          // 更新温度数据
          this.temperatureData.current = latestData.temperature || 0;
          this.temperatureData.average = avgTemp.toFixed(1);
          this.temperatureData.max = Math.max(...temperatures);
          this.temperatureData.min = Math.min(...temperatures);
          
          // 更新温度概览数据
          this.temperatureOverview[0].value = this.temperatureData.current;
          this.temperatureOverview[1].value = parseFloat(this.temperatureData.average);
          this.temperatureOverview[2].value = this.temperatureData.max;
          this.temperatureOverview[3].value = this.temperatureData.min;
          
          // 准备图表数据，按时间排序
          const sortedData = [...tempData].sort((a, b) => new Date(a.recordTime) - new Date(b.recordTime));
          this.temperatureData.historyData = sortedData.slice(-20).map(item => ({
            time: this.parseTime(item.recordTime, '{h}:{i}'),
            value: parseFloat(item.temperature || 0),
            deviceId: item.deviceId
          }));
          
          // 更新状态
          this.updateTemperatureStatus(this.temperatureData.current);
          
          // 更新图表
          this.updateTemperatureChart();
          
          // 更新异常数据（温度部分）
          this.updateAnomalyDataFromTemperature(tempData);
        }
      } catch (error) {
        console.error('获取温度传感器数据失败:', error);
      }
    },
    
    // 从温度数据更新异常数据
    updateAnomalyDataFromTemperature(tempData) {
      // 定义温度阈值
      const tempNormalMin = 20.0; // 正常温度最低值
      const tempNormalMax = 38.0; // 正常温度最高值
      const tempWarningMin = 18.0; // 警告温度最低值
      const tempWarningMax = 40.0; // 警告温度最高值
      
      // 提取温度异常数据
      const tempAnomalies = [];
      tempData.forEach(item => {
        const temp = parseFloat(item.temperature);
        if (temp < tempWarningMin || temp > tempWarningMax) {
          tempAnomalies.push({
            id: `temp_${item.id}`,
            type: 'temperature',
            title: '温度异常',
            description: `设备${item.deviceId || item.id}温度${temp}°C，超出正常范围(${tempNormalMin}-${tempNormalMax}°C)`,
            time: item.recordTime || new Date().toISOString(),
            level: temp < (tempWarningMin - 2) || temp > (tempWarningMax + 2) ? 'high' : 'medium',
            levelText: temp < (tempWarningMin - 2) || temp > (tempWarningMax + 2) ? '高' : '中'
          });
        }
      });
      
      // 更新异常数据中的温度部分
      this.anomalyStats.temperature = tempAnomalies.length;
      
      // 合并到总异常数据
      this.mergeAnomalyData(tempAnomalies);
    },
    
    // 获取压力传感器数据
    async fetchPressureData() {
      try {
        // 导入压力传感器API
        const { listPressureSensor } = await import('@/api/system/pressureSensor');
        const response = await listPressureSensor({
          pageNum: 1,
          pageSize: 100
        });
        
        if (response.code === 200 && response.rows && response.rows.length > 0) {
          // 处理压力数据，基于实际表结构
          const pressureData = response.rows;
          // 按record_time降序排序，获取最新数据
          pressureData.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
          const latestData = pressureData[0]; // 获取最新数据
          
          // 计算统计数据
          const pressures = pressureData.map(item => parseFloat(item.pressureValue || 0));
          const avgPressure = pressures.reduce((sum, pressure) => sum + pressure, 0) / pressures.length;
          
          // 基于实际压力范围设置阈值
          const normalMin = 100.0; // 正常压力最低值
          const normalMax = 500.0; // 正常压力最高值
          const warningMin = 80.0; // 警告压力最低值
          const warningMax = 600.0; // 警告压力最高值
          
          const normalCount = pressures.filter(pressure => pressure >= normalMin && pressure <= normalMax).length;
          const warningCount = pressures.filter(pressure => (pressure >= warningMin && pressure < normalMin) || (pressure > normalMax && pressure <= warningMax)).length;
          const abnormalCount = pressures.filter(pressure => pressure < warningMin || pressure > warningMax).length;
          
          // 更新压力数据
          this.pressureData.current = latestData.pressureValue || 0;
          this.pressureData.average = avgPressure.toFixed(1);
          this.pressureData.max = Math.max(...pressures);
          this.pressureData.min = Math.min(...pressures);
          
          // 更新压力概览数据
          this.pressureOverview[0].value = this.pressureData.current;
          this.pressureOverview[1].value = parseFloat(this.pressureData.average);
          this.pressureOverview[2].value = this.pressureData.max;
          this.pressureOverview[3].value = this.pressureData.min;
          
          // 准备图表数据，按时间排序
          const sortedData = [...pressureData].sort((a, b) => new Date(a.recordTime) - new Date(b.recordTime));
          this.pressureData.historyData = sortedData.slice(-20).map(item => ({
            time: this.parseTime(item.recordTime, '{h}:{i}'),
            value: parseFloat(item.pressureValue || 0),
            deviceId: item.deviceId,
            positionZone: item.positionZone // 添加压力区域信息
          }));
          
          // 更新状态
          this.updatePressureStatus(this.pressureData.current);
          
          // 更新图表
          this.updatePressureChart();
          
          // 更新异常数据（压力部分）
          this.updateAnomalyDataFromPressure(pressureData);
        }
      } catch (error) {
        console.error('获取压力传感器数据失败:', error);
      }
    },
    
    // 从压力数据更新异常数据
    updateAnomalyDataFromPressure(pressureData) {
      // 定义压力阈值
      const pressureNormalMin = 100.0; // 正常压力最低值
      const pressureNormalMax = 500.0; // 正常压力最高值
      const pressureWarningMin = 80.0; // 警告压力最低值
      const pressureWarningMax = 600.0; // 警告压力最高值
      
      // 提取压力异常数据
      const pressureAnomalies = [];
      pressureData.forEach(item => {
        const pressure = parseFloat(item.pressureValue); // 使用正确的字段名
        if (pressure < pressureWarningMin || pressure > pressureWarningMax) {
          pressureAnomalies.push({
            id: `pressure_${item.id}`,
            type: 'pressure',
            title: '压力异常',
            description: `设备${item.deviceId || item.id}压力值${pressure}，超出正常范围(${pressureNormalMin}-${pressureNormalMax})`,
            time: item.recordTime || new Date().toISOString(),
            level: pressure < (pressureWarningMin - 20) || pressure > (pressureWarningMax + 50) ? 'high' : 'medium',
            levelText: pressure < (pressureWarningMin - 20) || pressure > (pressureWarningMax + 50) ? '高' : '中',
            positionZone: item.positionZone || '未知区域' // 添加压力区域信息
          });
        }
      });
      
      // 更新异常数据中的压力部分
      this.anomalyStats.pressure = pressureAnomalies.length;
      
      // 合并到总异常数据
      this.mergeAnomalyData(pressureAnomalies);
    },
    
    // 获取雷达传感器数据
    async fetchRadarData() {
      try {
        // 动态导入雷达传感器API
        const { listRadarSensor } = await import('@/api/system/radarSensor');
        
        // 获取雷达传感器数据
        const response = await listRadarSensor({ pageSize: 100 });
        
        if (response && response.rows) {
          // 处理雷达数据，基于实际表结构
          const radarData = response.rows;
          // 按record_time降序排序，获取最新数据
          radarData.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
          
          // 计算统计数据
          this.radarData.currentEvents = radarData.filter(item => {
            const now = new Date()
            const recordTime = new Date(item.recordTime)
            const diffMinutes = Math.floor((now - recordTime) / (1000 * 60))
            return diffMinutes < 5 // 最近5分钟的事件
          }).length
          
          this.radarData.totalEvents = radarData.length
          
          // 基于实际雷达数据结构计算检测率
          const validEvents = radarData.filter(item => item.eventType && item.eventType !== 'none');
          this.radarData.detectionRate = (validEvents.length / radarData.length * 100).toFixed(1)
          
          // 基于原始数据中的置信度计算准确率（如果有）
          let confidenceSum = 0;
          let confidenceCount = 0;
          radarData.forEach(item => {
            if (item.rawData && item.rawData.confidence) {
              confidenceSum += parseFloat(item.rawData.confidence);
              confidenceCount++;
            }
          });
          this.radarData.accuracy = confidenceCount > 0 ? (confidenceSum / confidenceCount * 100).toFixed(1) : "95.0";
          
          // 准备图表数据 - 按事件类型分组
          const eventTypes = {}
          radarData.forEach(item => {
            if (!eventTypes[item.eventType]) {
              eventTypes[item.eventType] = 0
            }
            eventTypes[item.eventType]++
          })
          
          this.radarData.historyData = Object.keys(eventTypes).map(type => ({
            name: this.getEventTypeText(type),
            value: eventTypes[type],
            deviceId: radarData.find(item => item.eventType === type)?.deviceId
          }))
          
          // 更新雷达概览数据
          this.radarOverview[0].value = this.radarData.currentEvents;
          this.radarOverview[1].value = this.radarData.totalEvents;
          this.radarOverview[2].value = this.radarData.detectionRate;
          this.radarOverview[3].value = this.radarData.accuracy;
          
          // 更新状态
          this.updateRadarStatus(this.radarData.currentEvents)
          
          // 更新图表
          this.updateRadarChart()
          
          // 更新异常数据（雷达部分）
          this.updateAnomalyDataFromRadar(radarData);
        }
      } catch (error) {
        console.error('获取雷达传感器数据失败:', error);
        this.$message.error('获取雷达传感器数据失败');
      }
    },
    
    // 从雷达数据更新异常数据
    updateAnomalyDataFromRadar(radarData) {
      // 提取雷达异常数据
      const radarAnomalies = [];
      radarData.forEach(item => {
        // 检查event_type以ERROR开头的数据
        let isErrorType = item.eventType && item.eventType.startsWith('ERROR');
        
        // 基于实际雷达数据结构，eventType为'fall'或'abnormal'表示异常
        if (item.eventType === 'fall' || item.eventType === 'abnormal' || item.eventType === 'emergency' || isErrorType) {
          let eventTypeText, title, description, level, levelText;
          
          if (isErrorType) {
            // 处理event_type以ERROR开头的异常数据
            eventTypeText = '错误';
            title = '雷达数据错误';
            description = `设备${item.deviceId || item.id}检测到错误事件: ${item.eventType}`;
            level = 'high';
            levelText = '高';
          } else {
            // 处理其他类型的异常
            eventTypeText = item.eventType === 'fall' ? '跌倒' : 
                           item.eventType === 'abnormal' ? '异常' : '紧急情况';
            title = '雷达检测异常';
            description = `设备${item.deviceId || item.id}检测到${eventTypeText}事件`;
            level = item.eventType === 'fall' || item.eventType === 'emergency' ? 'high' : 'medium';
            levelText = item.eventType === 'fall' || item.eventType === 'emergency' ? '高' : '中';
          }
          
          radarAnomalies.push({
            id: `radar_${item.id}`,
            type: 'radar',
            title: title,
            description: description,
            time: item.recordTime || new Date().toISOString(),
            level: level,
            levelText: levelText,
            eventType: isErrorType ? 'error' : item.eventType,
            value: item.value, // 添加事件值信息
            rawData: item.rawData // 添加原始数据信息
          });
        }
      });
      
      // 更新异常数据中的雷达部分
      this.anomalyStats.radar = radarAnomalies.length;
      
      // 合并到总异常数据
      this.mergeAnomalyData(radarAnomalies);
    },
    
    // 获取心率传感器数据
    async fetchHeartRateData() {
      try {
        // 动态导入心率传感器API
        const { listHeartRateSensor } = await import('@/api/system/heartRateSensor');
        
        // 获取心率传感器数据
        const response = await listHeartRateSensor({ pageSize: 100 });
        
        if (response && response.rows) {
          // 处理心率数据，基于实际表结构
          const heartRateData = response.rows;
          // 按record_time降序排序，获取最新数据
          heartRateData.sort((a, b) => new Date(b.recordTime) - new Date(a.recordTime));
          
          // 计算统计数据
          const heartRates = heartRateData.map(item => parseInt(item.heartRate || 0));
          this.heartRateData.current = heartRates[0] || 0; // 获取最新数据
          this.heartRateData.average = (heartRates.reduce((sum, rate) => sum + rate, 0) / heartRates.length).toFixed(0);
          this.heartRateData.max = Math.max(...heartRates);
          this.heartRateData.min = Math.min(...heartRates);
          
          // 基于实际心率范围设置阈值
          const normalMin = 60; // 正常心率最低值
          const normalMax = 100; // 正常心率最高值
          const warningMin = 50; // 警告心率最低值
          const warningMax = 110; // 警告心率最高值
          
          const normalCount = heartRates.filter(rate => rate >= normalMin && rate <= normalMax).length;
          const warningCount = heartRates.filter(rate => (rate >= warningMin && rate < normalMin) || (rate > normalMax && rate <= warningMax)).length;
          const abnormalCount = heartRates.filter(rate => rate < warningMin || rate > warningMax).length;
          
          // 准备图表数据，按时间排序
          const sortedData = [...heartRateData].sort((a, b) => new Date(a.recordTime) - new Date(b.recordTime));
          this.heartRateData.historyData = sortedData.slice(-20).map(item => ({
            time: this.parseTime(item.recordTime, '{h}:{i}'),
            value: parseInt(item.heartRate || 0),
            deviceId: item.deviceId
          }));
          
          // 更新心率概览数据
          this.heartRateOverview[0].value = this.heartRateData.current;
          this.heartRateOverview[1].value = this.heartRateData.average;
          this.heartRateOverview[2].value = this.heartRateData.max;
          this.heartRateOverview[3].value = this.heartRateData.min;
          
          // 更新状态
          this.updateHeartRateStatus(this.heartRateData.current);
          
          // 更新图表
          this.updateHeartRateChart();
          
          // 更新异常数据（心率部分）
          this.updateAnomalyDataFromHeartRate(heartRateData);
        }
      } catch (error) {
        console.error('获取心率传感器数据失败:', error);
        this.$message.error('获取心率传感器数据失败');
      }
    },
    
    // 从心率数据更新异常数据
    updateAnomalyDataFromHeartRate(heartRateData) {
      // 定义心率阈值
      const heartRateNormalMin = 60; // 正常心率最低值
      const heartRateNormalMax = 100; // 正常心率最高值
      const heartRateWarningMin = 50; // 警告心率最低值
      const heartRateWarningMax = 110; // 警告心率最高值
      
      // 提取心率异常数据
      const heartRateAnomalies = [];
      heartRateData.forEach(item => {
        const heartRate = parseInt(item.heartRate);
        if (heartRate < heartRateWarningMin || heartRate > heartRateWarningMax) {
          heartRateAnomalies.push({
            id: `heartRate_${item.id}`,
            type: 'heartRate',
            title: '心率异常',
            description: `设备${item.deviceId || item.id}心率${heartRate}bpm，超出正常范围(${heartRateNormalMin}-${heartRateNormalMax}bpm)`,
            time: item.recordTime || new Date().toISOString(),
            level: heartRate < (heartRateWarningMin - 10) || heartRate > (heartRateWarningMax + 10) ? 'high' : 'medium',
            levelText: heartRate < (heartRateWarningMin - 10) || heartRate > (heartRateWarningMax + 10) ? '高' : '中'
          });
        }
      });
      
      // 更新异常数据中的心率部分
      this.anomalyStats.heartRate = heartRateAnomalies.length;
      
      // 合并到总异常数据
      this.mergeAnomalyData(heartRateAnomalies);
    },
    
    // 合并异常数据
    mergeAnomalyData(newAnomalies) {
      // 检查是否有新的异常数据
      const hasNewAnomalies = newAnomalies.length > 0;
      
      // 如果是第一次调用，直接使用新数据
      if (!this.anomalies || this.anomalies.length === 0) {
        this.anomalies = newAnomalies;
      } else {
        // 合并新旧异常数据，避免重复
        const existingIds = new Set(this.anomalies.map(a => a.id));
        const uniqueNewAnomalies = newAnomalies.filter(a => !existingIds.has(a.id));
        this.anomalies = [...this.anomalies, ...uniqueNewAnomalies];
      }
      
      // 按时间排序，最新的在前面
      this.anomalies.sort((a, b) => new Date(b.time) - new Date(a.time));
      
      // 更新异常总数
      this.anomalyCount = this.anomalies.length;
      
      // 如果有新的异常数据，触发更新动画
      if (hasNewAnomalies) {
        this.animateAnomalyDataUpdate();
      }
    },
    
    // 获取设备数据
    async fetchDeviceData() {
      try {
        const { listDevice } = await import('@/api/system/device');
        
        const response = await listDevice({});
        
        if (response && response.rows) {
          const deviceList = response.rows;
          
          // 计算设备统计数据
          let onlineCount = 0;
          let offlineCount = 0;
          let warningCount = 0;
          
          deviceList.forEach(device => {
            if (device.status === 1) {
              onlineCount++;
            } else if (device.status === 0) {
              offlineCount++;
            } else if (device.status === 2) {
              warningCount++;
            }
          });
          
          // 更新设备统计
          this.deviceStats.total = deviceList.length;
          this.deviceStats.online = onlineCount;
          this.deviceStats.offline = offlineCount;
          this.deviceStats.warning = warningCount;
          
          // 准备设备列表
          this.deviceList = deviceList.slice(0, 5).map(item => ({
            id: item.id,
            deviceSn: item.deviceSn,
            model: item.model,
            macAddress: item.macAddress,
            firmwareVersion: item.firmwareVersion,
            userId: item.userId,
            status: item.status === 1 ? 'online' : item.status === 0 ? 'offline' : 'warning',
            statusText: this.getDeviceStatusText(item.status === 1 ? 'online' : item.status === 0 ? 'offline' : 'warning'),
            statusClass: item.status === 1 ? 'online' : item.status === 0 ? 'offline' : 'warning',
            lastSeenAt: item.lastSeenAt,
            createTime: item.createTime,
            updateTime: item.updateTime
          }));
        }
      } catch (error) {
        console.error('获取设备数据失败:', error);
        this.$message.error('获取设备数据失败');
      }
    },
    
    // 获取异常数据
    async fetchAnomalyData() {
      try {
        // 动态导入各传感器API
        const { listTemperatureSensor } = await import('@/api/system/temperatureSensor');
        const { listPressureSensor } = await import('@/api/system/pressureSensor');
        const { listHeartRateSensor } = await import('@/api/system/heartRateSensor');
        const { listRadarSensor } = await import('@/api/system/radarSensor');
        
        // 并行获取各传感器数据
        const [temperatureRes, pressureRes, heartRateRes, radarRes] = await Promise.all([
          listTemperatureSensor({}),
          listPressureSensor({}),
          listHeartRateSensor({}),
          listRadarSensor({})
        ]);
        
        const anomalies = [];
        
        // 定义各传感器的阈值
        const tempNormalMin = 20.0; // 正常温度最低值
        const tempNormalMax = 38.0; // 正常温度最高值
        const tempWarningMin = 18.0; // 警告温度最低值
        const tempWarningMax = 40.0; // 警告温度最高值
        
        const pressureNormalMin = 100.0; // 正常压力最低值
        const pressureNormalMax = 500.0; // 正常压力最高值
        const pressureWarningMin = 80.0; // 警告压力最低值
        const pressureWarningMax = 600.0; // 警告压力最高值
        
        const heartRateNormalMin = 60; // 正常心率最低值
        const heartRateNormalMax = 100; // 正常心率最高值
        const heartRateWarningMin = 50; // 警告心率最低值
        const heartRateWarningMax = 110; // 警告心率最高值
        
        // 处理温度异常数据
        if (temperatureRes && temperatureRes.rows) {
          temperatureRes.rows.forEach(item => {
            const temp = parseFloat(item.temperature);
            if (temp < tempWarningMin || temp > tempWarningMax) {
              anomalies.push({
                id: `temp_${item.id}`,
                type: 'temperature',
                title: '温度异常',
                description: `设备${item.deviceId || item.id}温度${temp}°C，超出正常范围(${tempNormalMin}-${tempNormalMax}°C)`,
                time: item.recordTime || new Date().toISOString(),
                level: temp < (tempWarningMin - 2) || temp > (tempWarningMax + 2) ? 'high' : 'medium',
                levelText: temp < (tempWarningMin - 2) || temp > (tempWarningMax + 2) ? '高' : '中'
              });
            }
          });
        }
        
        // 处理压力异常数据
        if (pressureRes && pressureRes.rows) {
          pressureRes.rows.forEach(item => {
            const pressure = parseFloat(item.pressureValue); // 使用正确的字段名
            if (pressure < pressureWarningMin || pressure > pressureWarningMax) {
              anomalies.push({
                id: `pressure_${item.id}`,
                type: 'pressure',
                title: '压力异常',
                description: `设备${item.deviceId || item.id}压力值${pressure}，超出正常范围(${pressureNormalMin}-${pressureNormalMax})`,
                time: item.recordTime || new Date().toISOString(),
                level: pressure < (pressureWarningMin - 20) || pressure > (pressureWarningMax + 50) ? 'high' : 'medium',
                levelText: pressure < (pressureWarningMin - 20) || pressure > (pressureWarningMax + 50) ? '高' : '中',
                positionZone: item.positionZone || '未知区域' // 添加压力区域信息
              });
            }
          });
        }
        
        // 处理心率异常数据
        if (heartRateRes && heartRateRes.rows) {
          heartRateRes.rows.forEach(item => {
            const heartRate = parseInt(item.heartRate);
            if (heartRate < heartRateWarningMin || heartRate > heartRateWarningMax) {
              anomalies.push({
                id: `heartRate_${item.id}`,
                type: 'heartRate',
                title: '心率异常',
                description: `设备${item.deviceId || item.id}心率${heartRate}bpm，超出正常范围(${heartRateNormalMin}-${heartRateNormalMax}bpm)`,
                time: item.recordTime || new Date().toISOString(),
                level: heartRate < (heartRateWarningMin - 10) || heartRate > (heartRateWarningMax + 10) ? 'high' : 'medium',
                levelText: heartRate < (heartRateWarningMin - 10) || heartRate > (heartRateWarningMax + 10) ? '高' : '中'
              });
            }
          });
        }
        
        // 处理雷达异常数据
        if (radarRes && radarRes.rows) {
          radarRes.rows.forEach(item => {
            // 基于实际雷达数据结构，eventType为'fall'或'abnormal'表示异常
            if (item.eventType === 'fall' || item.eventType === 'abnormal' || item.eventType === 'emergency') {
              const eventTypeText = item.eventType === 'fall' ? '跌倒' : 
                                   item.eventType === 'abnormal' ? '异常' : '紧急情况';
              anomalies.push({
                id: `radar_${item.id}`,
                type: 'radar',
                title: '雷达检测异常',
                description: `设备${item.deviceId || item.id}检测到${eventTypeText}事件`,
                time: item.recordTime || new Date().toISOString(),
                level: item.eventType === 'fall' || item.eventType === 'emergency' ? 'high' : 'medium',
                levelText: item.eventType === 'fall' || item.eventType === 'emergency' ? '高' : '中',
                eventType: item.eventType,
                value: item.value // 添加事件值信息
              });
            }
          });
        }
        
        // 按时间排序，最新的在前面
        anomalies.sort((a, b) => new Date(b.time) - new Date(a.time));
        
        // 更新异常数据
        this.anomalies = anomalies.slice(0, 10); // 只显示最新的10条异常
        this.anomalyCount = anomalies.length;
        
        // 更新各类型异常计数
        this.anomalyStats.temperature = anomalies.filter(a => a.type === 'temperature').length;
        this.anomalyStats.pressure = anomalies.filter(a => a.type === 'pressure').length;
        this.anomalyStats.heartRate = anomalies.filter(a => a.type === 'heartRate').length;
        this.anomalyStats.radar = anomalies.filter(a => a.type === 'radar').length;
      } catch (error) {
        console.error('获取异常数据失败:', error);
        this.$message.error('获取异常数据失败');
      }
    },
    
    // 刷新设备数据
    refreshDeviceData() {
      this.fetchDeviceData();
    },
    
    // 查看设备详情
    async viewDeviceDetails(device) {
      try {
        // 动态导入设备API
        const { getDevice } = await import('@/api/system/device');
        
        // 获取设备详细信息
        const response = await getDevice(device.id);
        
        if (response && response.data) {
          const deviceData = response.data;
          
          // 格式化设备数据
          this.deviceDetailDialog.device = {
            id: deviceData.id,
            deviceSn: deviceData.deviceSn,
            model: deviceData.model,
            macAddress: deviceData.macAddress,
            firmwareVersion: deviceData.firmwareVersion,
            userId: deviceData.userId,
            status: deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning',
            statusText: this.getDeviceStatusText(deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning'),
            statusClass: deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning',
            lastSeenAt: this.parseTime(deviceData.lastSeenAt),
            createTime: this.parseTime(deviceData.createTime),
            updateTime: this.parseTime(deviceData.updateTime)
          };
        } else {
          // 如果API调用失败，使用列表中的数据
          this.deviceDetailDialog.device = { ...device };
        }
        
        this.deviceDetailDialog.visible = true;
      } catch (error) {
        console.error('获取设备详情失败:', error);
        // 如果API调用失败，使用列表中的数据
        this.deviceDetailDialog.device = { ...device };
        this.deviceDetailDialog.visible = true;
        this.$message.warning('获取设备详情失败，显示基本信息');
      }
    },
    
    // 关闭设备详情对话框
    closeDeviceDetailDialog() {
      this.deviceDetailDialog.visible = false
    },
    
    // 刷新设备详情
    async refreshDeviceDetail() {
      if (this.deviceDetailDialog.device && this.deviceDetailDialog.device.id) {
        try {
          // 动态导入设备API
          const { getDevice } = await import('@/api/system/device');
          
          // 获取设备详细信息
          const response = await getDevice(this.deviceDetailDialog.device.id);
          
          if (response && response.data) {
            const deviceData = response.data;
            
            // 更新设备数据
            this.deviceDetailDialog.device = {
              id: deviceData.id,
              deviceSn: deviceData.deviceSn,
              model: deviceData.model,
              macAddress: deviceData.macAddress,
              firmwareVersion: deviceData.firmwareVersion,
              userId: deviceData.userId,
              status: deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning',
              statusText: this.getDeviceStatusText(deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning'),
              statusClass: deviceData.status === 1 ? 'online' : deviceData.status === 0 ? 'offline' : 'warning',
              lastSeenAt: this.parseTime(deviceData.lastSeenAt),
              createTime: this.parseTime(deviceData.createTime),
              updateTime: this.parseTime(deviceData.updateTime)
            };
            
            this.$message.success('设备详情已刷新');
          } else {
            this.$message.error('刷新设备详情失败');
          }
        } catch (error) {
          console.error('刷新设备详情失败:', error);
          this.$message.error('刷新设备详情失败');
        }
      }
    },
    
    // 更新温度状态
    updateTemperatureStatus(temperature) {
      // 基于实际温度范围设置阈值
      const normalMin = 20.0; // 正常温度最低值
      const normalMax = 38.0; // 正常温度最高值
      const warningMin = 18.0; // 警告温度最低值
      const warningMax = 40.0; // 警告温度最高值
      
      if (temperature > warningMax || temperature < warningMin) {
        this.temperatureStatus = 'danger'
        this.temperatureStatusText = '异常'
      } else if (temperature > normalMax || temperature < normalMin) {
        this.temperatureStatus = 'warning'
        this.temperatureStatusText = '警告'
      } else {
        this.temperatureStatus = 'normal'
        this.temperatureStatusText = '正常'
      }
    },
    
    // 更新压力状态
    updatePressureStatus(pressure) {
      // 基于实际压力范围设置阈值
      const normalMin = 100.0; // 正常压力最低值
      const normalMax = 500.0; // 正常压力最高值
      const warningMin = 80.0; // 警告压力最低值
      const warningMax = 600.0; // 警告压力最高值
      
      if (pressure > warningMax || pressure < warningMin) {
        this.pressureStatus = 'danger'
        this.pressureStatusText = '异常'
      } else if (pressure > normalMax || pressure < normalMin) {
        this.pressureStatus = 'warning'
        this.pressureStatusText = '警告'
      } else {
        this.pressureStatus = 'normal'
        this.pressureStatusText = '正常'
      }
    },
    
    // 更新雷达状态
    updateRadarStatus(events) {
      if (events > 10) {
        this.radarStatus = 'danger'
        this.radarStatusText = '异常'
      } else if (events > 5) {
        this.radarStatus = 'warning'
        this.radarStatusText = '警告'
      } else {
        this.radarStatus = 'normal'
        this.radarStatusText = '正常'
      }
    },
    
    // 更新心率状态
    updateHeartRateStatus(heartRate) {
      // 基于实际心率范围设置阈值
      const normalMin = 60; // 正常心率最低值
      const normalMax = 100; // 正常心率最高值
      const warningMin = 50; // 警告心率最低值
      const warningMax = 110; // 警告心率最高值
      
      if (heartRate > warningMax || heartRate < warningMin) {
        this.heartRateStatus = 'danger'
        this.heartRateStatusText = '异常'
      } else if (heartRate > normalMax || heartRate < normalMin) {
        this.heartRateStatus = 'warning'
        this.heartRateStatusText = '警告'
      } else {
        this.heartRateStatus = 'normal'
        this.heartRateStatusText = '正常'
      }
    },
    
    // 更新温度图表
    updateTemperatureChart() {
      if (!this.temperatureChart) return
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: 'rgba(255,159,127,0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            return `<div style="padding: 5px;">
                      <div style="font-weight: bold;margin-bottom: 5px;">温度数据</div>
                      <div>时间: ${params[0].axisValue}</div>
                      <div>温度: ${params[0].value}°C</div>
                      <div>状态: ${this.getTemperatureStatusText(params[0].value)}</div>
                    </div>`
          },
          extraCssText: 'border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.temperatureData.historyData.map(item => item.time),
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12,
            formatter: '{value}°C'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '温度',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          sampling: 'average',
          animationDuration: 1500,
          animationEasing: 'elasticOut',
          itemStyle: {
            color: '#FF9F7F',
            borderColor: '#fff',
            borderWidth: 2,
            shadowColor: '#FF9F7F',
            shadowBlur: 10,
            shadowOffsetY: 0
          },
          lineStyle: {
            width: 3,
            shadowColor: '#FF9F7F',
            shadowBlur: 15,
            shadowOffsetY: 0
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 159, 127, 0.6)'
              },
              {
                offset: 0.5,
                color: 'rgba(255, 159, 127, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(255, 159, 127, 0.05)'
              }
            ]),
            origin: 'start'
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ],
            itemStyle: {
              color: '#FF9F7F'
            },
            label: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ],
            lineStyle: {
              color: '#FF9F7F',
              type: 'dashed',
              width: 2
            },
            label: {
              color: '#FF9F7F',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          data: this.temperatureData.historyData.map(item => item.value)
        }]
      }
      
      this.temperatureChart.setOption(option)
    },
    
    // 获取温度状态文本
    getTemperatureStatusText(temperature) {
      // 基于实际温度范围设置阈值
      const normalMin = 20.0; // 正常温度最低值
      const normalMax = 38.0; // 正常温度最高值
      const warningMin = 18.0; // 警告温度最低值
      const warningMax = 40.0; // 警告温度最高值
      
      if (temperature > warningMax || temperature < warningMin) {
        return '异常'
      } else if (temperature > normalMax || temperature < normalMin) {
        return '警告'
      } else {
        return '正常'
      }
    },
    
    // 更新压力图表
    updatePressureChart() {
      if (!this.pressureChart) return
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: 'rgba(55,162,218,0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            return `<div style="padding: 5px;">
                      <div style="font-weight: bold;margin-bottom: 5px;">压力数据</div>
                      <div>时间: ${params[0].axisValue}</div>
                      <div>压力: ${params[0].value} kPa</div>
                      <div>状态: ${this.getPressureStatusText(params[0].value)}</div>
                    </div>`
          },
          extraCssText: 'border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.pressureData.historyData.map(item => item.time),
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12,
            formatter: '{value} kPa'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '压力',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          sampling: 'average',
          animationDuration: 1500,
          animationEasing: 'elasticOut',
          itemStyle: {
            color: '#37A2DA',
            borderColor: '#fff',
            borderWidth: 2,
            shadowColor: '#37A2DA',
            shadowBlur: 10,
            shadowOffsetY: 0
          },
          lineStyle: {
            width: 3,
            shadowColor: '#37A2DA',
            shadowBlur: 15,
            shadowOffsetY: 0
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(55, 162, 218, 0.6)'
              },
              {
                offset: 0.5,
                color: 'rgba(55, 162, 218, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(55, 162, 218, 0.05)'
              }
            ]),
            origin: 'start'
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ],
            itemStyle: {
              color: '#37A2DA'
            },
            label: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ],
            lineStyle: {
              color: '#37A2DA',
              type: 'dashed',
              width: 2
            },
            label: {
              color: '#37A2DA',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          data: this.pressureData.historyData.map(item => item.value)
        }]
      }
      
      this.pressureChart.setOption(option)
    },
    
    // 获取压力状态文本
    getPressureStatusText(pressure) {
      // 基于实际压力范围设置阈值
      const normalMin = 100.0; // 正常压力最低值
      const normalMax = 500.0; // 正常压力最高值
      const warningMin = 80.0; // 警告压力最低值
      const warningMax = 600.0; // 警告压力最高值
      
      if (pressure > warningMax || pressure < warningMin) {
        return '异常'
      } else if (pressure > normalMax || pressure < normalMin) {
        return '警告'
      } else {
        return '正常'
      }
    },
    
    // 更新雷达图表
    updateRadarChart() {
      if (!this.radarChart) return
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: 'rgba(255,159,127,0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            return `<div style="padding: 5px;">
                      <div style="font-weight: bold;margin-bottom: 5px;">${params.name}</div>
                      <div>数量: ${params.value}</div>
                      <div>占比: ${params.percent}%</div>
                    </div>`
          },
          extraCssText: 'border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#8392A5',
            fontSize: 12
          },
          itemGap: 15
        },
        series: [{
          name: '事件类型',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['60%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: 'rgba(0, 0, 0, 0.2)',
            borderWidth: 2,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 5
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold',
              formatter: '{b}\n{c} ({d}%)'
            },
            itemStyle: {
              shadowBlur: 15,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            show: false
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: (idx) => Math.random() * 200,
          data: this.radarData.historyData,
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#FF9F7F'
              }, {
                offset: 1, color: '#FF7F7F'
              }]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#37A2DA'
              }, {
                offset: 1, color: '#2D8FD9'
              }]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#67C23A'
              }, {
                offset: 1, color: '#5CB32C'
              }]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#E6A23C'
              }, {
                offset: 1, color: '#D6922C'
              }]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#F56C6C'
              }, {
                offset: 1, color: '#E55C5C'
              }]
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#909399'
              }, {
                offset: 1, color: '#808389'
              }]
            }
          ]
        }]
      }
      
      this.radarChart.setOption(option)
    },
    
    // 更新心率图表
    updateHeartRateChart() {
      if (!this.heartRateChart) return
      
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: 'rgba(255,107,107,0.5)',
          borderWidth: 1,
          textStyle: {
            color: '#fff'
          },
          formatter: (params) => {
            return `<div style="padding: 5px;">
                      <div style="font-weight: bold;margin-bottom: 5px;">心率数据</div>
                      <div>时间: ${params[0].axisValue}</div>
                      <div>心率: ${params[0].value} bpm</div>
                      <div>状态: ${this.getHeartRateStatusText(params[0].value)}</div>
                    </div>`
          },
          extraCssText: 'border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.heartRateData.historyData.map(item => item.time),
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(131, 146, 165, 0.5)'
            }
          },
          axisLabel: {
            color: '#8392A5',
            fontSize: 12,
            formatter: '{value} bpm'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.05)',
              type: 'dashed'
            }
          }
        },
        series: [{
          name: '心率',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          sampling: 'average',
          animationDuration: 1500,
          animationEasing: 'elasticOut',
          itemStyle: {
            color: '#FF6B6B',
            borderColor: '#fff',
            borderWidth: 2,
            shadowColor: '#FF6B6B',
            shadowBlur: 10,
            shadowOffsetY: 0
          },
          lineStyle: {
            width: 3,
            shadowColor: '#FF6B6B',
            shadowBlur: 15,
            shadowOffsetY: 0
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 107, 107, 0.6)'
              },
              {
                offset: 0.5,
                color: 'rgba(255, 107, 107, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(255, 107, 107, 0.05)'
              }
            ]),
            origin: 'start'
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ],
            itemStyle: {
              color: '#FF6B6B'
            },
            label: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值' }
            ],
            lineStyle: {
              color: '#FF6B6B',
              type: 'dashed',
              width: 2
            },
            label: {
              color: '#FF6B6B',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          data: this.heartRateData.historyData.map(item => item.value)
        }]
      }
      
      this.heartRateChart.setOption(option)
    },
    
    // 获取心率状态文本
    getHeartRateStatusText(heartRate) {
      if (heartRate > 100 || heartRate < 60) {
        return '异常'
      } else if (heartRate > 90 || heartRate < 65) {
        return '警告'
      } else {
        return '正常'
      }
    },
    
    // 获取事件类型文本
    getEventTypeText(type) {
      const typeMap = {
        'motion': '运动',
        'presence': '存在',
        'fall': '跌倒',
        'none': '无',
        'other': '其他'
      }
      return typeMap[type] || type
    },
    
    // 获取设备状态文本
    getDeviceStatusText(status) {
      const statusMap = {
        'online': '在线',
        'offline': '离线',
        'warning': '警告'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取异常图标
    getAnomalyIcon(type) {
      const iconMap = {
        'temperature': 'el-icon-s-marketing',
        'pressure': 'el-icon-s-data',
        'heartRate': 'el-icon-first-aid-kit',
        'radar': 'el-icon-s-grid',
        'error': 'el-icon-error'
      }
      return iconMap[type] || 'el-icon-warning'
    },
    
    // 时间格式化
    parseTime(time, pattern) {
      if (!time) return ''
      
      const date = new Date(time)
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      
      return time_str
    },
    
    // 处理导出命令
    handleExportCommand(command) {
      // 根据命令类型和格式执行不同的导出操作
      const [dataType, format] = command.split('-')
      
      switch(dataType) {
        case 'temperature':
          this.exportTemperatureData(format)
          break
        case 'pressure':
          this.exportPressureData(format)
          break
        case 'radar':
          this.exportRadarData(format)
          break
        case 'heartRate':
          this.exportHeartRateData(format)
          break
        case 'device':
          this.exportDeviceData(format)
          break
        case 'anomaly':
          this.exportAnomalyData(format)
          break
        default:
          this.$message.error('未知的导出类型')
      }
    },
    
    // 导出温度数据
    exportTemperatureData(format) {
      try {
        const data = this.temperatureData.historyData.map(item => ({
          时间: this.parseTime(item.time),
          温度值: item.value,
          状态: this.getTemperatureStatusText(item.value)
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '温度数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '温度数据')
        }
        
        this.$message.success(`温度数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出温度数据失败:', error)
        this.$message.error('导出温度数据失败')
      }
    },
    
    // 导出压力数据
    exportPressureData(format) {
      try {
        const data = this.pressureData.historyData.map(item => ({
          时间: this.parseTime(item.time),
          压力值: item.value,
          状态: this.getPressureStatusText(item.value)
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '压力数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '压力数据')
        }
        
        this.$message.success(`压力数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出压力数据失败:', error)
        this.$message.error('导出压力数据失败')
      }
    },
    
    // 导出雷达数据
    exportRadarData(format) {
      try {
        const data = this.radarData.historyData.map(item => ({
          时间: this.parseTime(item.time),
          事件类型: this.getEventTypeText(item.eventType),
          状态: item.status
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '雷达数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '雷达数据')
        }
        
        this.$message.success(`雷达数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出雷达数据失败:', error)
        this.$message.error('导出雷达数据失败')
      }
    },
    
    // 导出心率数据
    exportHeartRateData(format) {
      try {
        const data = this.heartRateData.historyData.map(item => ({
          时间: this.parseTime(item.time),
          心率值: item.value,
          状态: this.getHeartRateStatusText(item.value)
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '心率数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '心率数据')
        }
        
        this.$message.success(`心率数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出心率数据失败:', error)
        this.$message.error('导出心率数据失败')
      }
    },
    
    // 导出设备数据
    exportDeviceData(format) {
      try {
        const data = this.deviceList.map(device => ({
          设备ID: device.deviceId,
          设备名称: device.deviceName,
          设备类型: device.deviceType,
          状态: this.getDeviceStatusText(device.status),
          最后更新: this.parseTime(device.lastUpdate)
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '设备数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '设备数据')
        }
        
        this.$message.success(`设备数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出设备数据失败:', error)
        this.$message.error('导出设备数据失败')
      }
    },
    
    // 导出异常数据
    exportAnomalyData(format) {
      try {
        const data = this.anomalies.map(anomaly => ({
          时间: this.parseTime(anomaly.timestamp),
          类型: anomaly.type,
          传感器ID: anomaly.sensorId,
          异常值: anomaly.value,
          阈值: anomaly.threshold,
          级别: anomaly.level
        }))
        
        if (format === 'csv') {
          this.downloadCSV(data, '异常数据')
        } else if (format === 'excel') {
          this.downloadExcel(data, '异常数据')
        }
        
        this.$message.success(`异常数据已导出为${format.toUpperCase()}格式`)
      } catch (error) {
        console.error('导出异常数据失败:', error)
        this.$message.error('导出异常数据失败')
      }
    },
    
    // 下载CSV文件
    downloadCSV(data, filename) {
      if (!data || data.length === 0) {
        this.$message.warning('没有可导出的数据')
        return
      }
      
      // 获取表头
      const headers = Object.keys(data[0])
      
      // 构建CSV内容
      let csvContent = headers.join(',') + '\n'
      
      // 添加数据行
      data.forEach(item => {
        const row = headers.map(header => {
          const value = item[header]
          // 处理包含逗号或引号的值
          if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
            return `"${value.replace(/"/g, '""')}"`
          }
          return value
        })
        csvContent += row.join(',') + '\n'
      })
      
      // 添加BOM以支持中文
      const BOM = '\uFEFF'
      const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
      
      // 创建下载链接
      const link = document.createElement('a')
      const url = URL.createObjectURL(blob)
      link.setAttribute('href', url)
      link.setAttribute('download', `${filename}_${this.parseTime(new Date(), '{y}{m}{d}_{h}{i}{s}')}.csv`)
      link.style.visibility = 'hidden'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    
    // 下载Excel文件 (简化版，使用CSV格式模拟)
    downloadExcel(data, filename) {
      // 实际项目中可以使用xlsx等库生成真正的Excel文件
      // 这里为了简化，使用CSV格式并设置文件扩展名为xlsx
      this.downloadCSV(data, filename)
      
      // 提示用户这是简化的Excel文件
      this.$message.info('已生成CSV格式文件，可使用Excel打开')
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0a1929 0%, #1a2a3a 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  // 背景装饰
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 10% 20%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(0, 150, 255, 0.05) 0%, transparent 50%);
    z-index: 0;
  }
  
  // 动态背景元素
  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
    animation: rotate-bg 60s linear infinite;
    z-index: 0;
  }
  
  @keyframes rotate-bg {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

// 粒子背景
.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  
  .particle {
    position: absolute;
    background: rgba(0, 212, 255, 0.8);
    border-radius: 50%;
    animation: float linear infinite;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    
    @keyframes float {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
      }
    }
  }
}

// 网格背景
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(0, 150, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 150, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  z-index: 0;
  animation: grid-move 20s linear infinite;
  
  @keyframes grid-move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(30px, 30px);
    }
  }
  
  // 添加网格发光效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.03) 0%, transparent 70%);
    // 简化脉冲效果 - 移除动画
    // animation: pulse-grid 8s ease-in-out infinite;
  }
  
  // 简化脉冲效果 - 移除动画关键帧
  // @keyframes pulse-grid {
  //   0%, 100% {
  //     opacity: 0.3;
  //   }
  //   50% {
  //     opacity: 0.7;
  //   }
  // }
}

.dashboard-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  z-index: 10;
  background: rgba(10, 25, 41, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 150, 255, 0.3);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  height: auto;
  min-height: 60px;
  
  // 玻璃态反射效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  
  // 面板聚焦效果
  &.keyboard-focus {
    border: 2px solid rgba(0, 212, 255, 0.9);
    box-shadow: 
      0 0 0 4px rgba(0, 212, 255, 0.2),
      0 0 20px rgba(0, 212, 255, 0.4),
      0 15px 50px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    transform: translateY(-8px) scale(1.02);
    z-index: 10;
    
    // 聚焦时的动画效果
    // 简化脉冲效果 - 移除动画
    // animation: keyboard-focus-pulse 2s ease-in-out infinite;
    
    // 简化脉冲效果 - 移除动画关键帧
    // @keyframes keyboard-focus-pulse {
    //   0%, 100% {
    //     box-shadow: 
    //       0 0 0 4px rgba(0, 212, 255, 0.2),
    //       0 0 20px rgba(0, 212, 255, 0.4),
    //       0 15px 50px rgba(0, 0, 0, 0.5),
    //       inset 0 1px 0 rgba(255, 255, 255, 0.25),
    //       inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    //   }
    //   50% {
    //     box-shadow: 
    //       0 0 0 8px rgba(0, 212, 255, 0.3),
    //       0 0 30px rgba(0, 212, 255, 0.6),
    //       0 15px 50px rgba(0, 0, 0, 0.5),
    //       inset 0 1px 0 rgba(255, 255, 255, 0.25),
    //       inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    //   }
    // }
    
    // 聚焦时的边角装饰增强
    &::after {
      border-color: rgba(0, 212, 255, 1);
      box-shadow: 0 0 15px rgba(0, 212, 255, 1);
      width: 40px;
      height: 40px;
    }
    
    .corner-decoration {
      border-color: rgba(0, 212, 255, 1);
      box-shadow: 0 0 15px rgba(0, 212, 255, 1);
      width: 40px;
      height: 40px;
    }
    
    // 聚焦时的标题栏效果增强
    .panel-header {
      background: rgba(0, 20, 40, 0.95);
      border-bottom: 2px solid rgba(0, 212, 255, 0.9);
      
      &::after {
        width: 150px;
        height: 4px;
        background: linear-gradient(90deg, #00d4ff, #0096ff, transparent);
        animation: line-glow 1.5s ease-in-out infinite;
      }
      
      i {
        color: #00d4ff;
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
      }
      
      h3 {
        color: #ffffff;
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
      }
    }
  }
  
  // 悬停效果
  &:hover {
    background: rgba(10, 25, 41, 0.8);
    border-bottom-color: rgba(0, 150, 255, 0.5);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
  }
  
  // header-content样式定义
  .header-content {
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    z-index: 2;
    
    // 添加装饰性背景
    &::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -20px;
      right: -20px;
      bottom: -10px;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.05) 0%, 
        rgba(0, 212, 255, 0.08) 50%, 
        rgba(0, 150, 255, 0.05) 100%);
      border-radius: 15px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: -1;
      opacity: 0.7;
      transition: all 0.3s ease;
    }
    
    // 悬停时增强背景效果
    &:hover::before {
      opacity: 1;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.08) 0%, 
        rgba(0, 212, 255, 0.12) 50%, 
        rgba(0, 150, 255, 0.08) 100%);
    }
    
    .dashboard-title {
      font-size: 26px;
      font-weight: 700;
      margin: 0;
      background: linear-gradient(90deg, #ffffff, #00d4ff, #0096ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
      letter-spacing: 1.5px;
      position: relative;
      z-index: 2;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      padding: 5px 0;
      
      // 增强悬停效果
      &:hover {
        transform: translateY(-3px) scale(1.02);
        text-shadow: 0 4px 20px rgba(0, 212, 255, 0.5);
        
        // 悬停时增强装饰元素
        .title-decoration {
          width: 80%;
          box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
        }
      }
      
      // 标题装饰元素增强
      .title-decoration {
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 70%;
        height: 4px;
        background: linear-gradient(90deg, #00d4ff, #0096ff, transparent);
        border-radius: 2px;
        // animation: title-decoration-glow 2s ease-in-out infinite alternate; // 简化脉冲效果 - 移除动画
        transition: all 0.3s ease;
      }
      
      // 添加标题文字的微光效果
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(255, 255, 255, 0.2), 
          transparent);
        transform: translateX(-100%);
        animation: title-shine 3s infinite;
        z-index: -1;
      }
      
      // @keyframes title-decoration-glow {
      //   0% {
      //     box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
      //     opacity: 0.7;
      //   }
      //   100% {
      //     box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
      //     opacity: 1;
      //   }
      // } // 简化脉冲效果 - 移除动画关键帧
      
      @keyframes title-shine {
        0% {
          transform: translateX(-100%);
        }
        20%, 100% {
          transform: translateX(100%);
        }
      }
    }
    
    .dashboard-time {
      font-size: 16px;
      color: #00d4ff;
      font-weight: 600;
      padding: 10px 18px;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.15) 0%, 
        rgba(0, 212, 255, 0.1) 100%);
      border-radius: 25px;
      border: 1px solid rgba(0, 212, 255, 0.3);
      box-shadow: 
        0 0 15px rgba(0, 212, 255, 0.2),
        inset 0 0 10px rgba(0, 212, 255, 0.1);
      position: relative;
      z-index: 3;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      overflow: hidden;
      
      // 添加时间显示的脉冲效果
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, 
          rgba(0, 212, 255, 0.2) 0%, 
          transparent 70%);
        transform: translate(-50%, -50%);
        // 简化脉冲效果 - 移除动画
        // animation: time-pulse 2s infinite;
        z-index: -1;
      }
      
      // 增强悬停效果
      &:hover {
        background: linear-gradient(135deg, 
          rgba(0, 150, 255, 0.2) 0%, 
          rgba(0, 212, 255, 0.15) 100%);
        border-color: rgba(0, 212, 255, 0.5);
        box-shadow: 
          0 0 20px rgba(0, 212, 255, 0.3),
          inset 0 0 15px rgba(0, 212, 255, 0.15);
        transform: translateY(-3px) scale(1.05);
      }
      
      // 简化脉冲效果 - 移除动画关键帧
      // @keyframes time-pulse {
      //   0%, 100% {
      //     opacity: 0.3;
      //     transform: translate(-50%, -50%) scale(0.95);
      //   }
      //   50% {
      //     opacity: 0.6;
      //     transform: translate(-50%, -50%) scale(1.05);
      //   }
      // }
    }
  }
  
  // header-stats样式定义
  .header-stats {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 2;
    
    // 添加装饰性背景
    &::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.05) 0%, 
        rgba(0, 212, 255, 0.08) 50%, 
        rgba(0, 150, 255, 0.05) 100%);
      border-radius: 15px;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: -1;
      opacity: 0.7;
      transition: all 0.3s ease;
    }
    
    // 悬停时增强背景效果
    &:hover::before {
      opacity: 1;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.08) 0%, 
        rgba(0, 212, 255, 0.12) 50%, 
        rgba(0, 150, 255, 0.08) 100%);
    }
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 20px;
      background: linear-gradient(135deg, 
        rgba(0, 150, 255, 0.1) 0%, 
        rgba(0, 212, 255, 0.05) 100%);
      border-radius: 15px;
      border: 1px solid rgba(0, 212, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
      
      // 添加光效
      &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, 
          transparent, 
          rgba(255, 255, 255, 0.1), 
          transparent);
        transform: rotate(45deg);
        transition: all 0.5s;
        opacity: 0;
        z-index: 1;
      }
      
      &:hover::before {
        animation: shine 0.5s ease-in-out;
      }
      
      // 悬停效果
      &:hover {
        background: linear-gradient(135deg, 
          rgba(0, 150, 255, 0.15) 0%, 
          rgba(0, 212, 255, 0.1) 100%);
        border-color: rgba(0, 212, 255, 0.4);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 
          0 8px 25px rgba(0, 0, 0, 0.3),
          0 0 15px rgba(0, 212, 255, 0.2);
      }
      
      .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: #00d4ff;
        margin-bottom: 5px;
        text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
        
        &:hover {
          text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
          transform: scale(1.05);
        }
      }
      
      .stat-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
        
        &:hover {
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
    
    @keyframes shine {
      0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
      }
    }
  }
  
  // 装饰线条
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, transparent);
    z-index: 2;
  }
  
  .dashboard-title {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(90deg, #fff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
    
    // 文字发光效果
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(8px);
      background: linear-gradient(90deg, rgba(0, 212, 255, 0.5), transparent);
      z-index: -1;
      opacity: 0.5;
    }
    
    &:hover {
      transform: scale(1.02);
      
      &::after {
        filter: blur(12px);
        opacity: 0.7;
      }
    }
  }
  
  .dashboard-time {
    font-size: 16px;
    color: #00d4ff;
    font-weight: 500;
    padding: 8px 15px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(0, 212, 255, 0.15);
      border-color: rgba(0, 212, 255, 0.3);
      box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
      transform: scale(1.05);
    }
  }
}

.dashboard-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  padding: 15px;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  
  // 玻璃态反射效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  
  // 悬停效果
  &:hover {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
}

// 三列布局容器
.three-column-layout {
  display: flex;
  gap: 15px;
  flex: 1;
  min-height: 0;
  
  .left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .center-column {
    flex: 1.5; // 中间列更宽
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
}

// 传感器面板样式
.sensor-panel {
  flex: 1;
}

// 设备信息面板
.device-info-panel {
  flex: 0.6;
  min-height: 300px;
}

// 异常数据面板
.anomaly-panel {
  flex: 1.4;
  min-height: 540px; // 增加最小高度，确保有足够空间显示固定高度的列表
  
  // 增强异常数据面板的视觉效果
  background: linear-gradient(135deg, 
    rgba(25, 35, 55, 0.9), 
    rgba(35, 50, 75, 0.85),
    rgba(20, 30, 50, 0.9));
  backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid rgba(255, 100, 100, 0.3);
  box-shadow: 
    0 10px 35px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 100, 100, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 25px rgba(255, 100, 100, 0.1);
  
  // 异常数据面板特有的玻璃态反射效果
  &::before {
    background: linear-gradient(
      to bottom,
      rgba(255, 100, 100, 0.08) 0%,
      rgba(255, 100, 100, 0.03) 30%,
      rgba(255, 255, 255, 0.02) 60%,
      transparent 100%
    );
  }
  
  // 异常数据面板特有的边框光晕
  &::after {
    background: linear-gradient(45deg, 
      rgba(255, 100, 100, 0.4) 0%, 
      rgba(255, 150, 150, 0.2) 25%, 
      rgba(255, 100, 100, 0.4) 50%, 
      rgba(255, 150, 150, 0.2) 75%, 
      rgba(255, 100, 100, 0.4) 100%);
    opacity: 0.7;
    // 简化脉冲效果 - 移除动画
  }
  
  // 悬停效果
  &:hover {
    border-color: rgba(255, 100, 100, 0.5);
    box-shadow: 
      0 15px 45px rgba(0, 0, 0, 0.6),
      0 0 40px rgba(255, 100, 100, 0.25),
      0 0 0 1px rgba(255, 100, 100, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-10px) scale(1.02);
    
    &::before {
      background: linear-gradient(
        to bottom,
        rgba(255, 100, 100, 0.12) 0%,
        rgba(255, 100, 100, 0.05) 30%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 100%
      );
    }
    
    &::after {
      opacity: 1;
    }
  }
  
  // 异常数据面板特有的边角装饰
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-top: 3px solid rgba(255, 100, 100, 0.8);
    border-left: 3px solid rgba(255, 100, 100, 0.8);
    border-top-left-radius: 15px;
    z-index: 2;
    box-shadow: 
      0 0 10px rgba(255, 100, 100, 0.6),
      inset 0 0 10px rgba(255, 100, 100, 0.3);
    // 简化脉冲效果 - 移除动画
  }
  
  // 右下角装饰
  .corner-decoration {
    border-color: rgba(255, 100, 100, 0.8);
    box-shadow: 
      0 0 10px rgba(255, 100, 100, 0.6),
      inset 0 0 10px rgba(255, 100, 100, 0.3);
    // 简化脉冲效果 - 移除动画
  }
  
  // 面板头部样式增强
  .panel-header {
    background: linear-gradient(90deg, 
      rgba(30, 15, 15, 0.9) 0%, 
      rgba(40, 20, 20, 0.85) 50%, 
      rgba(30, 15, 15, 0.9) 100%);
    border-bottom: 1px solid rgba(255, 100, 100, 0.4);
    
    &::after {
      background: linear-gradient(90deg, rgba(255, 100, 100, 0.8), transparent);
      // 简化脉冲效果 - 移除动画
    }
    
    i {
      color: #ff6464;
      filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.7));
      
      &:hover {
        filter: drop-shadow(0 0 15px rgba(255, 100, 100, 1));
      }
    }
    
    span::after {
      background: linear-gradient(90deg, rgba(255, 100, 100, 0.8), transparent);
    }
  }
}

// 响应式布局 - 平板
@media (max-width: 1200px) {
  .dashboard-header {
    padding: 15px 20px;
    
    .header-content {
      gap: 20px;
      
      .dashboard-title {
        font-size: 24px;
        letter-spacing: 1.2px;
        
        .title-decoration {
          width: 60%;
        }
      }
      
      .dashboard-time {
        font-size: 14px;
        padding: 8px 14px;
      }
    }
    
    .header-stats {
      gap: 15px;
      
      .stat-item {
        padding: 10px 16px;
        
        .stat-value {
          font-size: 20px;
        }
        
        .stat-label {
          font-size: 11px;
        }
      }
    }
  }
  
  .dashboard-content {
    gap: 15px;
    padding: 15px;
  }
  
  .three-column-layout {
    flex-direction: column;
    gap: 15px;
    
    .left-column,
    .center-column,
    .right-column {
      flex: 1;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 15px;
    }
  }
  
  .sensor-panel,
  .device-info-panel,
  .anomaly-panel {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
    
    // 设备信息面板在中等屏幕上保持较小高度
    &.device-info-panel {
      flex: 0.7 1 calc(35% - 8px);
      min-width: calc(35% - 8px);
    }
    
    // 异常数据面板在中等屏幕上保持较大高度
    &.anomaly-panel {
      flex: 1.3 1 calc(65% - 8px);
      min-width: calc(65% - 8px);
      min-height: 500px; // 增加最小高度
      animation: anomaly-panel-entrance 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
      transform-origin: center;
      opacity: 1; // 修改初始状态为可见
      transform: translateY(0) scale(1); // 修改初始位置为正常位置
    }
    
    // 异常数据面板入场动画
    @keyframes anomaly-panel-entrance {
      from {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
        filter: blur(3px);
      }
      50% {
        transform: translateY(-3px) scale(1.01);
        opacity: 0.8;
        filter: blur(1px);
      }
      to {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
      }
    }
    
    // 异常数据面板呼吸效果
    &.anomaly-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at center, 
        rgba(255, 100, 100, 0.05) 0%, 
        transparent 70%);
      border-radius: 15px;
      opacity: 0;
      z-index: 1;
      pointer-events: none;
      // animation: anomaly-panel-breathe 4s ease-in-out infinite; // 简化脉冲效果 - 移除动画
    }
    
    // @keyframes anomaly-panel-breathe {
    //   0%, 100% {
    //     opacity: 0;
    //     transform: scale(1);
    //   }
    //   50% {
    //     opacity: 0.6;
    //     transform: scale(1.05);
    //   }
    // } // 简化脉冲效果 - 移除动画关键帧
    
    // 异常数据面板脉冲边框
    &.anomaly-panel::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, 
        rgba(255, 100, 100, 0.3) 0%, 
        rgba(255, 150, 50, 0.2) 25%, 
        rgba(255, 100, 100, 0.3) 50%, 
        rgba(255, 150, 50, 0.2) 75%, 
        rgba(255, 100, 100, 0.3) 100%);
      border-radius: 17px;
      z-index: -1;
      opacity: 0.7;
      // animation: anomaly-panel-border-pulse 3s linear infinite; // 简化脉冲效果 - 移除动画
    }
    
    // @keyframes anomaly-panel-border-pulse {
    //   0%, 100% {
    //     opacity: 0.3;
    //     transform: scale(1);
    //   }
    //   50% {
    //     opacity: 0.8;
    //     transform: scale(1.02);
    //   }
    // } // 简化脉冲效果 - 移除动画关键帧
  }
}

    // 响应式布局 - 手机
@media (max-width: 768px) {
  .dashboard-header {
    padding: 12px 15px;
    flex-direction: column;
    gap: 15px;
    
    .header-content {
      gap: 15px;
      width: 100%;
      justify-content: space-between;
      
      .dashboard-title {
        font-size: 20px;
        letter-spacing: 1px;
        
        .title-decoration {
          width: 50%;
        }
      }
      
      .dashboard-time {
        font-size: 12px;
        padding: 6px 12px;
      }
    }
    
    .header-stats {
      gap: 10px;
      width: 100%;
      justify-content: center;
      
      .stat-item {
        padding: 8px 12px;
        flex: 1;
        
        .stat-value {
          font-size: 18px;
        }
        
        .stat-label {
          font-size: 10px;
        }
      }
    }
  }
  
  .dashboard-content {
    gap: 10px;
    padding: 10px;
  }
  
  .three-column-layout {
    flex-direction: column;
    gap: 10px;
    
    .left-column,
    .center-column,
    .right-column {
      flex: 1;
      flex-direction: column;
      gap: 10px;
    }
  }
  
  .sensor-panel,
  .device-info-panel,
  .anomaly-panel {
    flex: 1;
    min-height: 200px;
    
    // 设备信息面板在移动端保持较小高度
    &.device-info-panel {
      flex: 0.6;
      min-height: 180px;
    }
    
    // 移动端异常面板动画优化
    &.anomaly-panel {
      flex: 1.4;
      min-height: 240px;
      animation: anomaly-panel-mobile-entrance 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }
    
    @keyframes anomaly-panel-mobile-entrance {
      0% {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
  }
}

// 异常数据面板内容区域动画
.anomaly-panel {
  .panel-content {
    animation: content-fade-in 1.5s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 1; // 修改初始状态为可见
    transform: translateY(0); // 修改初始位置为正常位置
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px; // 增加最小高度，确保有足够空间显示内容
    overflow: hidden;
  }
  
  @keyframes content-fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  // 异常数据标签页动画
  .anomaly-tabs {
    animation: tabs-slide-in 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: 0.3s;
    opacity: 1; // 修改初始状态为可见
    transform: translateX(0); // 修改初始位置为正常位置
    flex-shrink: 0;
    max-height: 40px; // 减小最大高度，为列表留出更多空间
    overflow: hidden;
  }
  
  @keyframes tabs-slide-in {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  // 异常数据列表动画
  .anomaly-list {
    animation: list-fade-in 1s ease-out forwards;
    animation-delay: 0.5s;
    opacity: 1; // 修改初始状态为可见
    transform: translateY(0); // 修改初始位置为正常位置
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 300px; // 设置固定高度，不随内容变化
    overflow-y: auto;
    overflow-x: hidden;
    // 确保滚动条样式美观
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.4);
      border-radius: 3px;
      
      &:hover {
        background: rgba(0, 150, 255, 0.6);
      }
    }
    
    .anomaly-item {
      display: flex;
      align-items: flex-start; // 改为flex-start以适应多行内容
      padding: 14px 0; // 增加上下内边距使显示更加从容
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: visible; // 改为visible确保内容完全显示
      opacity: 1; // 修改初始状态为可见
      transform: translateY(0); // 修改初始位置为正常位置
      animation: anomaly-item-entrance 0.6s ease-out forwards;
      animation-delay: calc(var(--delay, 0s) + 0.5s);
      height: 70px; // 使用固定高度确保内容完整显示，防止日期溢出
      
      @keyframes anomaly-item-entrance {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      // 点击反馈动画
      &:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
      }
      
      // 点击状态样式
      &.clicked {
        animation: item-click-feedback 0.3s ease-out;
      }
      
      @keyframes item-click-feedback {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(0.95);
          box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
        }
        100% {
          transform: scale(1);
        }
      }
      
      // 移除悬停时的波纹效果
      // &::after {
      //   content: '';
      //   position: absolute;
      //   top: 50%;
      //   left: 50%;
      //   width: 0;
      //   height: 0;
      //   border-radius: 50%;
      //   background: rgba(255, 255, 255, 0.1);
      //   transform: translate(-50%, -50%);
      //   transition: width 0.6s, height 0.6s;
      //   z-index: 0;
      // }
      
      // &:hover::after {
      //   width: 100%;
      //   height: 100%;
      // }
    }
  }
  
  @keyframes list-fade-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  // 异常徽章动画
  .anomaly-badge {
    // 简化脉冲效果 - 移除动画
    // animation: badge-pulse 2s ease-in-out infinite;
    transform: scale(0.9);
  }
  
  // 简化脉冲效果 - 移除动画关键帧
  // @keyframes badge-pulse {
  //   0%, 100% {
  //     transform: scale(0.9);
  //   }
  //   50% {
  //     transform: scale(1);
  //   }
  // }
  
  // 数据更新时的闪烁效果
  &.data-updated {
    animation: data-update-flash 0.8s ease-out;
  }
  
  @keyframes data-update-flash {
    0% {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(0, 150, 255, 0.6);
    }
    100% {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 150, 255, 0.15);
    }
  }
}

.panel {
  flex: 1;
  margin-bottom: 0;
  background: rgba(20, 30, 48, 0.8);
  border-radius: 15px;
  border: 1px solid rgba(0, 150, 255, 0.4);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4), 
    0 0 20px rgba(0, 150, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 5;
  min-height: 0;
  
  // 悬停效果
  &:hover {
    transform: translateY(-8px);
    box-shadow: 
      0 15px 50px rgba(0, 0, 0, 0.5), 
      0 0 35px rgba(0, 150, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 150, 255, 0.6);
  }
  
  // 玻璃态反射效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  
  // 装饰性边框光晕
  &::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
      rgba(0, 150, 255, 0.3) 0%, 
      rgba(0, 212, 255, 0.1) 25%, 
      rgba(0, 150, 255, 0.3) 50%, 
      rgba(0, 212, 255, 0.1) 75%, 
      rgba(0, 150, 255, 0.3) 100%);
    border-radius: 16px;
    z-index: -1;
    opacity: 0.6;
    // animation: border-glow 8s linear infinite; // 简化脉冲效果 - 移除动画
  }
  
  // @keyframes border-glow {
  //   0% {
  //     background-position: 0% 50%;
  //   }
  //   100% {
  //     background-position: 200% 50%;
  //   }
  // } // 简化脉冲效果 - 移除动画关键帧
  
  // 面板悬停效果 - 增强玻璃态
  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.5), 
      0 0 35px rgba(0, 150, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    background: rgba(20, 30, 48, 0.85);
    border-color: rgba(0, 150, 255, 0.7);
    
    // 悬停时的反射效果增强
    &::before {
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
      );
    }
  }
  
  // 面板边角装饰
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-top: 3px solid rgba(0, 212, 255, 0.7);
    border-left: 3px solid rgba(0, 212, 255, 0.7);
    border-top-left-radius: 15px;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  // 右下角装饰
  .corner-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35px;
    height: 35px;
    border-bottom: 3px solid rgba(0, 212, 255, 0.7);
    border-right: 3px solid rgba(0, 212, 255, 0.7);
    border-bottom-right-radius: 15px;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  
  // 悬停时边角装饰增强
  &:hover {
    &::after {
      border-color: rgba(0, 212, 255, 1);
      box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
    }
    
    .corner-decoration {
      border-color: rgba(0, 212, 255, 1);
      box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
    }
  }
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .panel-header {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background: rgba(10, 25, 41, 0.85);
    border-bottom: 1px solid rgba(0, 150, 255, 0.4);
    position: relative;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
    
    // 玻璃态反射效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
      );
      pointer-events: none;
      z-index: 1;
    }
    
    // 装饰线条
    &::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100px;
      height: 3px;
      background: linear-gradient(90deg, #00d4ff, transparent);
      z-index: 2;
      // animation: line-glow 3s ease-in-out infinite; // 简化脉冲效果 - 移除动画
    }
    
    // @keyframes line-glow {
    //   0%, 100% {
    //     opacity: 0.8;
    //     box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    //   }
    //   50% {
    //     opacity: 1;
    //     box-shadow: 0 0 20px rgba(0, 212, 255, 1);
    //   }
    // } // 简化脉冲效果 - 移除动画关键帧
    
    i {
      margin-right: 15px;
      font-size: 18px;
      color: #00d4ff;
      filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.7));
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 3;
      position: relative;
      
      &:hover {
        transform: scale(1.2) rotate(8deg);
        filter: drop-shadow(0 0 15px rgba(0, 212, 255, 1));
      }
    }
    
    span {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      position: relative;
      z-index: 3;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      
      // 文字发光效果
      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, rgba(0, 212, 255, 0.8), transparent);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }
      
      &:hover {
        color: #00d4ff;
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
        
        &::after {
          height: 3px;
          background: linear-gradient(90deg, rgba(0, 212, 255, 1), transparent);
        }
      }
    }
    
    .panel-status {
      display: flex;
      align-items: center;
      font-size: 15px;
      z-index: 3;
      position: relative;
      
      .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 7px;
        position: relative;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        z-index: 2;
        
        // 脉冲动画 - 简化版
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // 简化脉冲效果 - 移除动画
          // animation: pulse 2s infinite;
        }
        
        // 双层脉冲效果 - 简化版
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // 简化脉冲效果 - 移除动画
          // animation: pulse-secondary 3s infinite;
          // animation-delay: 0.5s;
        }
        
        &.normal {
          background-color: #67C23A;
          box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
          
          &::before {
            background-color: #67C23A;
            box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
          }
          
          &::after {
            background-color: #67C23A;
            box-shadow: 0 0 6px rgba(103, 194, 58, 0.5);
          }
        }
        
        &.warning {
          background-color: #E6A23C;
          box-shadow: 0 0 6px rgba(230, 162, 60, 0.5);
          
          &::before {
            background-color: #E6A23C;
            box-shadow: 0 0 6px rgba(230, 162, 60, 0.5);
          }
          
          &::after {
            background-color: #E6A23C;
            box-shadow: 0 0 6px rgba(230, 162, 60, 0.5);
          }
        }
        
        &.danger {
          background-color: #F56C6C;
          box-shadow: 0 0 6px rgba(245, 108, 108, 0.5);
          
          &::before {
            background-color: #F56C6C;
            box-shadow: 0 0 6px rgba(245, 108, 108, 0.5);
          }
          
          &::after {
            background-color: #F56C6C;
            box-shadow: 0 0 6px rgba(245, 108, 108, 0.5);
          }
        }
        
        // 简化脉冲效果 - 移除动画关键帧
        // @keyframes pulse {
        //   0% {
        //     transform: scale(1);
        //     opacity: 1;
        //   }
        //   70% {
        //     transform: scale(2);
        //     opacity: 0;
        //   }
        //   100% {
        //     transform: scale(1);
        //     opacity: 0;
        //   }
        // }
        
        // @keyframes pulse-secondary {
        //   0% {
        //     transform: scale(1);
        //     opacity: 0.8;
        //   }
        //   50% {
        //     transform: scale(1.5);
        //     opacity: 0.3;
        //   }
        //   100% {
        //     transform: scale(2.5);
        //     opacity: 0;
        //   }
        // }
      }
    }
    
    .anomaly-badge {
      margin-left: 5px;
      z-index: 3;
      position: relative;
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  .panel-content {
    flex: 1;
    padding: 8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    min-height: 0;
    
    // 玻璃态反射效果
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.005) 50%,
        transparent 100%
      );
      pointer-events: none;
      z-index: 1;
    }
    
    // 滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.3);
      border-radius: 3px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(0, 150, 255, 0.5);
      }
    }
    
    // 内容元素悬停效果
    > * {
      transition: all 0.3s ease;
    }
  }
}

.data-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 15px;
  perspective: 1000px; // 添加3D透视效果
  
  .data-item {
    text-align: center;
    padding: 10px 8px;
    background: rgba(0, 150, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(0, 150, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d; // 保持3D效果
    
    // 悬停效果 - 3D翻转
    &:hover {
      background: rgba(0, 150, 255, 0.2);
      transform: translateY(-10px) rotateX(8deg) rotateY(8deg);
      box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 150, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
      border-color: rgba(0, 150, 255, 0.4);
    }
    
    // 装饰光效
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transform: rotate(45deg);
      transition: all 0.5s;
      opacity: 0;
      z-index: 1;
    }
    
    &:hover::before {
      animation: shine 0.5s ease-in-out;
    }
    
    // 3D光效
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(0, 150, 255, 0.1) 100%);
      border-radius: 15px;
      opacity: 0;
      transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 0;
    }
    
    &:hover::after {
      opacity: 1;
    }
    
    @keyframes shine {
      0% {
        transform: rotate(45deg) translateY(-100%);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: rotate(45deg) translateY(100%);
        opacity: 0;
      }
    }
    
    .data-value {
      font-size: 18px;
      font-weight: 700;
      color: #00d4ff;
      margin-bottom: 6px;
      text-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
      position: relative;
      z-index: 2;
      transform: translateZ(20px); // 3D深度效果
      
      // 数字发光效果
      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 3px;
        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.8), transparent);
      }
      
      // 数据流动效果
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(0, 212, 255, 0.8), 
          transparent);
        transform: translateY(-50%);
        animation: data-flow 3s infinite;
        z-index: -1;
      }
    }
    
    .data-label {
      font-size: 14px;
      color: #8392A5;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: relative;
      z-index: 2;
      transform: translateZ(20px); // 3D深度效果
      font-weight: 600;
    }
  }
}

.chart-container {
  height: 160px;
  width: 100%;
  margin-top: 10px;
  position: relative;
  flex: 1;
  min-height: 0;
  
  // 图表容器背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
    z-index: 0;
  }
  
  // 悬停效果
  &:hover {
    &::before {
      background: radial-gradient(circle at center, rgba(0, 150, 255, 0.08) 0%, transparent 70%);
    }
  }
  
  // 图表边框装饰
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0, 150, 255, 0.15);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
  }
  
  // 添加图表容器悬停效果
  &:hover {
    &::before {
      background: radial-gradient(circle at center, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
    }
    
    &::after {
      border-color: rgba(0, 150, 255, 0.25);
      box-shadow: 0 0 15px rgba(0, 150, 255, 0.1);
    }
  }
}

.device-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 25px;
  perspective: 1000px; // 添加3D透视效果
  
  .stat-item {
    text-align: center;
    padding: 18px 12px;
    background: rgba(0, 150, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(0, 150, 255, 0.15);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d; // 保持3D效果
    
    // 悬停效果 - 3D翻转
    &:hover {
      background: rgba(0, 150, 255, 0.15);
      transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
      box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(0, 150, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    
    // 装饰光效
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      transform: rotate(45deg);
      transition: all 0.5s;
      opacity: 0;
      z-index: 1;
    }
    
    &:hover::before {
      animation: shine 0.5s ease-in-out;
    }
    
    // 3D光效
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%, 
        transparent 50%, 
        rgba(0, 150, 255, 0.08) 100%);
      border-radius: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 0;
    }
    
    &:hover::after {
      opacity: 1;
    }
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 0;
    }
    
    &:hover::after {
      opacity: 1;
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #00d4ff;
      margin-bottom: 8px;
      text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
      position: relative;
      z-index: 2;
      transform: translateZ(10px); // 3D深度效果
      
      // 数字发光效果
      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
      }
      
      // 数据流动效果
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -10px;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(0, 212, 255, 0.6), 
          transparent);
        transform: translateY(-50%);
        animation: data-flow 3s infinite;
        z-index: -1;
      }
    }
    
    .stat-label {
      font-size: 12px;
      color: #8392A5;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: relative;
      z-index: 2;
      transform: translateZ(10px); // 3D深度效果
    }
  }

.device-list {
  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    
    &:last-child {
      border-bottom: none;
    }
    
    // 悬停效果
    &:hover {
      background: rgba(0, 150, 255, 0.08);
      padding-left: 10px;
      padding-right: 10px;
      margin: 0 -10px;
      border-radius: 8px;
      transform: translateX(5px);
    }
    
    .device-info {
      .device-name {
        font-size: 15px;
        color: #fff;
        margin-bottom: 4px;
        font-weight: 600;
        transition: all 0.3s ease;
      }
      
      .device-id {
        font-size: 12px;
        color: #8392A5;
        font-family: 'Courier New', monospace;
        letter-spacing: 0.5px;
      }
    }
    
    .device-status {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 15px;
      position: relative;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      overflow: hidden;
      
      // 状态指示器脉冲效果
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 12px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        transform: translateY(-50%);
        // 简化脉冲效果 - 移除动画
        z-index: 1;
      }
      
      i {
        margin-right: 6px;
        font-size: 14px;
        z-index: 2;
        position: relative;
      }
      
      &.online {
        color: #67C23A;
        background: rgba(103, 194, 58, 0.15);
        border: 1px solid rgba(103, 194, 58, 0.3);
        
        &::before {
          background-color: #67C23A;
          box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
        }
        
        &:hover {
          background: rgba(103, 194, 58, 0.25);
          border-color: rgba(103, 194, 58, 0.5);
          transform: scale(1.08);
        }
      }
      
      &.offline {
        color: #F56C6C;
        background: rgba(245, 108, 108, 0.15);
        border: 1px solid rgba(245, 108, 108, 0.3);
        
        &::before {
          background-color: #F56C6C;
          box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
        }
        
        &:hover {
          background: rgba(245, 108, 108, 0.25);
          border-color: rgba(245, 108, 108, 0.5);
          transform: scale(1.08);
        }
      }
      
      &.warning {
        color: #E6A23C;
        background: rgba(230, 162, 60, 0.15);
        border: 1px solid rgba(230, 162, 60, 0.3);
        
        &::before {
          background-color: #E6A23C;
          box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
        }
        
        &:hover {
          background: rgba(230, 162, 60, 0.25);
          border-color: rgba(230, 162, 60, 0.5);
          transform: scale(1.08);
        }
      }
      
      // 简化脉冲效果 - 移除动画关键帧
      // @keyframes device-pulse {
      //   0% {
      //     transform: translateY(-50%) scale(1);
      //     opacity: 1;
      //   }
      //   70% {
      //     transform: translateY(-50%) scale(1.8);
      //     opacity: 0;
      //   }
      //   100% {
      //     transform: translateY(-50%) scale(1);
      //     opacity: 0;
      //   }
      // }
    }
  }
}

// 键盘聚焦高亮效果
.keyboard-focus {
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.8), 0 0 40px rgba(0, 150, 255, 0.4);
  border: 2px solid #00d4ff;
  transform: scale(1.02);
  position: relative;
  z-index: 100;
  
  // 简化脉冲效果 - 移除聚焦动画
  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: -5px;
  //   left: -5px;
  //   right: -5px;
  //   bottom: -5px;
  //   border: 1px solid rgba(0, 212, 255, 0.6);
  //   border-radius: inherit;
  //   animation: keyboard-pulse 1.5s ease-in-out infinite;
  //   pointer-events: none;
  // }
}

// 简化脉冲效果 - 移除动画关键帧
// @keyframes keyboard-pulse {
//   0% {
//     opacity: 0.8;
//     transform: scale(1);
//   }
//   50% {
//     opacity: 0.3;
//     transform: scale(1.02);
//   }
//   100% {
//     opacity: 0.8;
//     transform: scale(1);
//   }
// }

// 键盘快捷键提示框样式
.keyboard-shortcuts-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  
  .shortcuts-content {
    background: linear-gradient(135deg, rgba(20, 30, 48, 0.95), rgba(36, 59, 85, 0.95));
    border-radius: 12px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 150, 255, 0.3);
    
    .shortcuts-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h3 {
        color: #fff;
        font-size: 20px;
        margin: 0;
      }
      
      .close-btn {
        background: none;
        border: none;
        color: #8392A5;
        font-size: 24px;
        cursor: pointer;
        transition: color 0.3s;
        
        &:hover {
          color: #fff;
        }
      }
    }
    
    .shortcut-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      &:last-child {
        border-bottom: none;
      }
      
      .shortcut-desc {
        color: #ddd;
        font-size: 14px;
      }
      
      .shortcut-keys {
        display: flex;
        gap: 5px;
        
        .key {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          padding: 4px 8px;
          color: #fff;
          font-size: 12px;
          font-weight: bold;
          min-width: 20px;
          text-align: center;
        }
      }
    }
  }
}

// 高级数据流动效果
.advanced-data-flow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  
  .flow-line {
    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(0, 150, 255, 0.3), 
      rgba(0, 212, 255, 0.6), 
      rgba(0, 150, 255, 0.3), 
      transparent
    );
    top: 70px;
    left: 0;
    opacity: 0.7;
    animation: flow-line-animation 3s linear infinite;
    animation-delay: var(--delay, 0s);
    
    @keyframes flow-line-animation {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      10% {
        opacity: 0.7;
      }
      90% {
        opacity: 0.7;
      }
      100% {
        transform: translateX(100%);
        opacity: 0;
      }
    }
  }
  
  .flow-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.8), rgba(0, 150, 255, 0.4));
    top: 67px;
    left: -10px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    animation: flow-particle-animation 4s linear infinite;
    animation-delay: var(--delay, 0s);
    
    @keyframes flow-particle-animation {
      0% {
        transform: translateX(0) scale(0);
        opacity: 0;
      }
      10% {
        transform: translateX(20px) scale(1);
        opacity: 1;
      }
      90% {
        transform: translateX(calc(100vw - 40px)) scale(1);
        opacity: 1;
      }
      100% {
        transform: translateX(100vw) scale(0);
        opacity: 0;
      }
    }
  }
}

// 高级波动效果
.advanced-wave-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  
  .wave-point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.8), rgba(0, 150, 255, 0.4));
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    animation: wave-point-animation 3s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    
    @keyframes wave-point-animation {
      0%, 100% {
        transform: scale(0.8);
        opacity: 0.4;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.8;
      }
    }
  }
}

// 面板头部左右布局样式
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px; // 减小顶部和底部padding，为列表留出更多空间
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    
    i {
      font-size: 18px;
      color: #00d4ff;
    }
    
    span {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }
}

// 数据项动画效果
.data-item {
  animation: data-item-fade-in 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: var(--delay, 0s);
  
  @keyframes data-item-fade-in {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .data-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 5px;
    
    &.up {
      color: #67c23a;
    }
    
    &.down {
      color: #f56c6c;
    }
    
    i {
      font-size: 12px;
    }
  }
}

// 异常项动画效果
.anomaly-item {
  animation: anomaly-item-fade-in 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: var(--delay, 0s);
  
  @keyframes anomaly-item-fade-in {
    0% {
      opacity: 0;
      transform: translateX(-10px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

// 设备项动画效果
.device-item {
  animation: device-item-fade-in 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: var(--delay, 0s);
  
  @keyframes device-item-fade-in {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

// 统计项动画效果
.stat-item {
  animation: stat-item-fade-in 0.5s ease-out forwards;
  opacity: 0;
  animation-delay: var(--delay, 0s);
  
  @keyframes stat-item-fade-in {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

// 进度条动画效果
.progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
  
  .progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #00d4ff, #0096ff);
    width: var(--progress, 0%);
    animation: progress-fill-animation 1.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    
    @keyframes progress-fill-animation {
      0% {
        width: 0%;
      }
      100% {
        width: var(--progress, 0%);
      }
    }
  }
}

.anomaly-tabs {
  display: flex;
  margin-bottom: 5px; // 减小底部边距，为列表留出更多空间
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  
  // 增强装饰线效果
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
      rgba(255, 100, 100, 0.6), 
      rgba(255, 150, 150, 0.4), 
      transparent);
    // animation: anomaly-line-glow 3s ease-in-out infinite; // 简化脉冲效果 - 移除动画
  }
  
  // 添加背景渐变效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      rgba(255, 100, 100, 0.02), 
      rgba(255, 150, 150, 0.01), 
      transparent);
    pointer-events: none;
  }
  
  .tab-item {
    padding: 8px 16px;
    font-size: 14px;
    color: #8392A5;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    
    // 添加微妙的背景光效
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.03), 
        transparent);
      transition: left 0.6s ease;
    }
    
    // 悬停效果增强
    &:hover {
      color: #fff;
      background: rgba(255, 100, 100, 0.08);
      transform: translateY(-2px);
      box-shadow: 0 -2px 10px rgba(255, 100, 100, 0.15);
      
      // 悬停时触发光效
      &::before {
        left: 100%;
      }
    }
    
    &.active {
      color: #ff6464;
      background: rgba(255, 100, 100, 0.12);
      border-bottom-color: #ff6464;
      box-shadow: 0 -2px 15px rgba(255, 100, 100, 0.2);
      
      // 活跃标签装饰增强
      &::before {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: #ff6464;
        box-shadow: 0 0 10px rgba(255, 100, 100, 0.6);
        // animation: anomaly-tab-glow 2s ease-in-out infinite; // 简化脉冲效果 - 移除动画
        z-index: 3;
      }
      
      // 添加活跃标签的脉冲效果
      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 3px;
        background: #ff6464;
        opacity: 0;
        z-index: 2;
        // 简化脉冲效果 - 移除动画
        // animation: anomaly-tab-pulse 2s ease-in-out infinite;
      }
    }
  }
  
  // @keyframes anomaly-line-glow {
  //   0%, 100% {
  //     opacity: 0.6;
  //     box-shadow: 0 0 5px rgba(255, 100, 100, 0.4);
  //   }
  //   50% {
  //     opacity: 1;
  //     box-shadow: 0 0 15px rgba(255, 100, 100, 0.6);
  //   }
  // } // 简化脉冲效果 - 移除动画关键帧
  
  // @keyframes anomaly-tab-glow {
  //   0%, 100% {
  //     opacity: 0.8;
  //     box-shadow: 0 0 10px rgba(255, 100, 100, 0.6);
  //   }
  //   50% {
  //     opacity: 1;
  //     box-shadow: 0 0 20px rgba(255, 100, 100, 0.8);
  //   }
  // } // 简化脉冲效果 - 移除动画关键帧
  
  // 简化脉冲效果 - 移除动画关键帧
  // @keyframes anomaly-tab-pulse {
  //   0% {
  //     transform: translateX(-50%) scale(1);
  //     opacity: 0.6;
  //   }
  //   50% {
  //     transform: translateX(-50%) scale(1.5);
  //     opacity: 0;
  //   }
  //   100% {
  //     transform: translateX(-50%) scale(1);
  //     opacity: 0;
  //   }
  // }
}

.anomaly-list {
    max-height: none;
    height: 300px; // 设置固定高度，不随内容变化
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; // 确保不显示水平滚动条
    
    // 确保滚动条样式美观
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 150, 255, 0.4);
      border-radius: 3px;
      
      &:hover {
        background: rgba(0, 150, 255, 0.6);
      }
    }
    
    .anomaly-item {
      display: flex;
      align-items: flex-start; // 改为flex-start以适应多行内容
      padding: 14px 0; // 增加上下内边距使显示更加从容
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: visible; // 改为visible确保内容完全显示
      opacity: 0;
      transform: translateY(10px);
      animation: anomaly-item-entrance 0.6s ease-out forwards;
      animation-delay: var(--delay, 0s);
      height: 70px; // 使用固定高度确保内容完整显示，防止日期溢出
      
      @keyframes anomaly-item-entrance {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      &:last-child {
        border-bottom: none;
      }
    
    // 移除微妙的背景光效
    // &::before {
    //   content: '';
    //   position: absolute;
    //   top: 0;
    //   left: -100%;
    //   width: 100%;
    //   height: 100%;
    //   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    //   transition: left 0.6s ease;
    // }
    
    // 悬停效果增强
    &:hover {
      background: rgba(255, 100, 100, 0.08);
      padding-left: 10px;
      padding-right: 10px;
      margin: 0 -10px;
      border-radius: 8px;
      transform: translateX(5px);
      box-shadow: 0 4px 15px rgba(255, 100, 100, 0.15);
      border-left: 3px solid rgba(255, 100, 100, 0.6);
      
      // 移除悬停时触发光效
      // &::before {
      //   left: 100%;
      // }
      
      // 悬停时增强图标效果
      .anomaly-icon {
        transform: scale(1.15) rotate(8deg);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        
        &::before {
          opacity: 0.6;
          transform: scale(1.2);
        }
        
        &::after {
          opacity: 1;
        }
      }
      
      // 悬停时增强文本效果
      .anomaly-info {
        .anomaly-title {
          color: #fff;
          text-shadow: 0 0 8px rgba(255, 100, 100, 0.5);
        }
        
        .anomaly-desc {
          color: #a0b0c0;
        }
        
        .anomaly-time {
          color: #708090;
        }
      }
      
      // 悬停时增强级别标签效果
      .anomaly-level {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        
        &.high {
          background: rgba(245, 108, 108, 0.35);
          border-color: rgba(245, 108, 108, 0.6);
          box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
        }
        
        &.medium {
          background: rgba(230, 162, 60, 0.3);
          border-color: rgba(230, 162, 60, 0.5);
          box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
        }
        
        &.low {
          background: rgba(144, 147, 153, 0.3);
          border-color: rgba(144, 147, 153, 0.5);
          box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
        }
      }
    }
    
    .anomaly-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      position: relative;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      z-index: 2;
      align-self: center; // 添加垂直居中对齐
      
      // 图标光晕效果
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: inherit;
        filter: blur(10px);
        opacity: 0.4;
        z-index: -1;
        transition: all 0.4s ease;
      }
      
      // 添加脉冲效果
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: inherit;
        opacity: 0;
        z-index: -2;
        // 简化脉冲效果 - 移除动画
        // animation: anomaly-icon-pulse 2s infinite;
      }
      
      // 简化脉冲效果 - 移除动画关键帧
      // @keyframes anomaly-icon-pulse {
      //   0% {
      //     transform: scale(1);
      //     opacity: 0.4;
      //   }
      //   50% {
      //     transform: scale(1.3);
      //     opacity: 0;
      //   }
      //   100% {
      //     transform: scale(1);
      //     opacity: 0;
      //   }
      // }
      
      &.temperature {
        background: linear-gradient(135deg, 
          rgba(255, 159, 127, 0.25), 
          rgba(255, 179, 147, 0.35));
        color: #FF9F7F;
        box-shadow: 0 0 15px rgba(255, 159, 127, 0.3);
        
        // 添加温度图标特有的动画
        &::after {
          background: linear-gradient(135deg, 
            rgba(255, 159, 127, 0.5), 
            rgba(255, 179, 147, 0.6));
          // 简化脉冲效果 - 移除动画
          // animation: temperature-pulse 1.5s infinite;
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(255, 159, 127, 0.35), 
            rgba(255, 179, 147, 0.45));
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 0 20px rgba(255, 159, 127, 0.5);
        }
      }
      
      &.pressure {
        background: linear-gradient(135deg, 
          rgba(55, 162, 218, 0.25), 
          rgba(75, 182, 238, 0.35));
        color: #37A2DA;
        box-shadow: 0 0 15px rgba(55, 162, 218, 0.3);
        
        // 添加压力图标特有的动画
        &::after {
          background: linear-gradient(135deg, 
            rgba(55, 162, 218, 0.5), 
            rgba(75, 182, 238, 0.6));
          // 简化脉冲效果 - 移除动画
          // animation: pressure-pulse 2s infinite;
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(55, 162, 218, 0.35), 
            rgba(75, 182, 238, 0.45));
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 0 20px rgba(55, 162, 218, 0.5);
        }
      }
      
      &.heartRate {
        background: linear-gradient(135deg, 
          rgba(255, 107, 107, 0.25), 
          rgba(255, 127, 127, 0.35));
        color: #FF6B6B;
        box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
        
        // 添加心率图标特有的动画
        &::after {
          background: linear-gradient(135deg, 
            rgba(255, 107, 107, 0.5), 
            rgba(255, 127, 127, 0.6));
          // 简化脉冲效果 - 移除动画
          // animation: heartbeat-pulse 1s infinite;
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(255, 107, 107, 0.35), 
            rgba(255, 127, 127, 0.45));
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
        }
      }
      
      &.radar {
        background: linear-gradient(135deg, 
          rgba(103, 194, 58, 0.25), 
          rgba(123, 214, 78, 0.35));
        color: #67C23A;
        box-shadow: 0 0 15px rgba(103, 194, 58, 0.3);
        
        // 添加雷达图标特有的动画
        &::after {
          background: linear-gradient(135deg, 
            rgba(103, 194, 58, 0.5), 
            rgba(123, 214, 78, 0.6));
          // 简化脉冲效果 - 移除动画
          // animation: radar-pulse 2.5s infinite;
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(103, 194, 58, 0.35), 
            rgba(123, 214, 78, 0.45));
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 0 20px rgba(103, 194, 58, 0.5);
        }
      }
      
      // 简化脉冲效果 - 移除动画关键帧
      // @keyframes temperature-pulse {
      //   0%, 100% {
      //     transform: scale(1);
      //     opacity: 0.4;
      //   }
      //   50% {
      //     transform: scale(1.2);
      //     opacity: 0;
      //   }
      // }
      
      // @keyframes pressure-pulse {
      //   0% {
      //     transform: scale(1);
      //     opacity: 0.4;
      //   }
      //   50% {
      //     transform: scale(1.3);
      //     opacity: 0;
      //   }
      //   100% {
      //     transform: scale(1);
      //     opacity: 0;
      //   }
      // }
      
      // @keyframes heartbeat-pulse {
      //   0%, 100% {
      //     transform: scale(1);
      //     opacity: 0.4;
      //   }
      //   25% {
      //     transform: scale(1.1);
      //     opacity: 0.3;
      //   }
      //   50% {
      //     transform: scale(1.3);
      //     opacity: 0;
      //   }
      //   75% {
      //     transform: scale(1.1);
      //     opacity: 0.3;
      //   }
      // }
      
      // @keyframes radar-pulse {
      //   0% {
      //     transform: scale(1) rotate(0deg);
      //     opacity: 0.4;
      //   }
      //   50% {
      //     transform: scale(1.3) rotate(180deg);
      //     opacity: 0;
      //   }
      //   100% {
      //     transform: scale(1) rotate(360deg);
      //     opacity: 0;
      //   }
      // }
    }
    
    .anomaly-info {
      flex: 1;
      min-width: 0; // 确保文本可以正确换行
      align-self: center; // 添加垂直居中对齐
     
      
      .anomaly-title {
        font-size: 14px;
        color: #fff;
        margin-bottom: 3px; // 减小底部边距以节省空间
        font-weight: 600;
        line-height: 1.3; // 减小行高以节省空间
        white-space: nowrap; // 防止标题换行
        overflow: hidden; // 隐藏溢出内容
        text-overflow: ellipsis; // 使用省略号表示溢出文本
      }
      
      .anomaly-desc {
        font-size: 12px;
        color: #8392A5;
        margin-bottom: 3px; // 减小底部边距以节省空间
        line-height: 1.3; // 减小行高以节省空间
        white-space: nowrap; // 防止描述换行
        overflow: hidden; // 隐藏溢出内容
        text-overflow: ellipsis; // 使用省略号表示溢出文本
      }
      
      .anomaly-time {
        font-size: 11px;
        color: #5a6c7d;
        line-height: 1.3; // 减小行高以节省空间
        white-space: nowrap; // 防止时间换行
        overflow: hidden; // 隐藏溢出内容
        text-overflow: ellipsis; // 使用省略号表示溢出文本
      }
    }
    
    .anomaly-level {
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      
      // 添加级别标签的背景光效
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, 
          transparent, 
          rgba(255, 255, 255, 0.2), 
          transparent);
        transition: left 0.6s ease;
      }
      
      // 悬停时触发光效
      &:hover {
        &::before {
          left: 100%;
        }
      }
      
      &.high {
        background: linear-gradient(135deg, 
          rgba(245, 108, 108, 0.25), 
          rgba(255, 128, 128, 0.35));
        color: #F56C6C;
        border: 1px solid rgba(245, 108, 108, 0.4);
        box-shadow: 0 0 10px rgba(245, 108, 108, 0.3);
        
        // 添加高级别标签的脉冲效果
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, 
            rgba(245, 108, 108, 0.5), 
            rgba(255, 128, 128, 0.6));
          opacity: 0;
          z-index: -1;
          // animation: high-level-pulse 2s infinite; // 简化脉冲效果 - 移除动画
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(245, 108, 108, 0.35), 
            rgba(255, 128, 128, 0.45));
          border-color: rgba(245, 108, 108, 0.6);
          box-shadow: 0 0 15px rgba(245, 108, 108, 0.5);
          transform: scale(1.05);
        }
      }
      
      &.medium {
        background: linear-gradient(135deg, 
          rgba(230, 162, 60, 0.2), 
          rgba(240, 182, 80, 0.3));
        color: #E6A23C;
        border: 1px solid rgba(230, 162, 60, 0.3);
        box-shadow: 0 0 10px rgba(230, 162, 60, 0.25);
        
        // 添加中级别标签的脉冲效果
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, 
            rgba(230, 162, 60, 0.4), 
            rgba(240, 182, 80, 0.5));
          opacity: 0;
          z-index: -1;
          // animation: medium-level-pulse 2.5s infinite; // 简化脉冲效果 - 移除动画
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(230, 162, 60, 0.3), 
            rgba(240, 182, 80, 0.4));
          border-color: rgba(230, 162, 60, 0.5);
          box-shadow: 0 0 15px rgba(230, 162, 60, 0.4);
          transform: scale(1.05);
        }
      }
      
      &.low {
        background: linear-gradient(135deg, 
          rgba(144, 147, 153, 0.2), 
          rgba(164, 167, 173, 0.3));
        color: #909399;
        border: 1px solid rgba(144, 147, 153, 0.3);
        box-shadow: 0 0 10px rgba(144, 147, 153, 0.2);
        
        // 添加低级别标签的脉冲效果
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, 
            rgba(144, 147, 153, 0.3), 
            rgba(164, 167, 173, 0.4));
          opacity: 0;
          z-index: -1;
          // animation: low-level-pulse 3s infinite; // 简化脉冲效果 - 移除动画
        }
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(144, 147, 153, 0.3), 
            rgba(164, 167, 173, 0.4));
          border-color: rgba(144, 147, 153, 0.5);
          box-shadow: 0 0 15px rgba(144, 147, 153, 0.3);
          transform: scale(1.05);
        }
      }
      
      // 添加各级别标签的动画关键帧
      // @keyframes high-level-pulse {
      //   0%, 100% {
      //     transform: scale(1);
      //     opacity: 0;
      //   }
      //   50% {
      //     transform: scale(1.2);
      //     opacity: 0.3;
      //   }
      // } // 简化脉冲效果 - 移除动画关键帧
      
      // @keyframes medium-level-pulse {
      //   0%, 100% {
      //     transform: scale(1);
      //     opacity: 0;
      //   }
      //   50% {
      //     transform: scale(1.15);
      //     opacity: 0.25;
      //   }
      // } // 简化脉冲效果 - 移除动画关键帧
      
      // @keyframes low-level-pulse {
      //   0%, 100% {
      //     transform: scale(1);
      //     opacity: 0;
      //   }
      //   50% {
      //     transform: scale(1.1);
      //     opacity: 0.2;
      //   }
      // } // 简化脉冲效果 - 移除动画关键帧
    }
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, rgba(0, 150, 255, 0.4), rgba(0, 212, 255, 0.4));
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 10px rgba(0, 150, 255, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, rgba(0, 150, 255, 0.6), rgba(0, 212, 255, 0.6));
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
}

// 添加动画关键帧
@keyframes shine {
  0% {
    opacity: 0;
    transform: rotate(45deg) translateX(-100%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translateX(100%);
  }
}

// 添加脉冲动画
// @keyframes pulse {
//   0% {
//     transform: scale(1);
//   }
//   50% {
//     transform: scale(1.05);
//   }
//   100% {
//     transform: scale(1);
//   }
// } // 简化脉冲效果 - 移除动画关键帧

// 添加呼吸灯效果
@keyframes breathe {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

// 数据流动效果
@keyframes data-flow {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

// 数据包流动效果
@keyframes data-packet {
  0% {
    transform: translateX(-10px) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateX(10px) translateY(-5px);
  }
  30% {
    transform: translateX(20px) translateY(5px);
  }
  40% {
    transform: translateX(30px) translateY(-3px);
  }
  50% {
    transform: translateX(40px) translateY(3px);
  }
  60% {
    transform: translateX(50px) translateY(-2px);
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(110px) translateY(0);
    opacity: 0;
  }
}

// 数据波动效果
@keyframes data-wave {
  0% {
    transform: translateY(0);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
}

// 呼吸效果
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

// 波纹效果
@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

// 闪烁效果
@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

// 离线状态闪烁
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}

// 边框光晕动画
@keyframes border-glow {
  0% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.7), 0 0 40px rgba(0, 150, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
  }
}

// 线条光晕动画
@keyframes line-glow {
  0% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.9), 0 0 30px rgba(0, 150, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.6);
  }
}

// Tab标签光晕动画
@keyframes tab-glow {
  0% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.7), 0 0 30px rgba(0, 150, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 8px rgba(0, 150, 255, 0.4);
  }
}

// 数据流动线条
.data-flow-line {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(0, 150, 255, 0.9), 
    transparent);
  animation: data-flow 3s infinite;
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
}

// 数据包
.data-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 212, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  animation: data-packet 4s infinite;
  z-index: 2;
}

// 数据波动点
.data-wave-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(0, 212, 255, 0.8);
  border-radius: 50%;
  animation: data-wave 2s infinite;
  z-index: 1;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

// 设备详情对话框样式
.device-detail {
  padding: 10px 0;
}

.detail-row {
  display: flex;
  margin-bottom: 20px;
  
  .detail-item {
    flex: 1;
    padding: 0 10px;
    
    &.full-width {
      flex: 2;
    }
    
    .detail-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 8px;
    }
    
    .detail-value {
      font-size: 16px;
      color: #303133;
      font-weight: 500;
      display: flex;
      align-items: center;
      
      .status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
        
        &.online {
          background-color: #67C23A;
          box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
        }
        
        &.offline {
          background-color: #F56C6C;
          box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
        }
        
        &.warning {
          background-color: #E6A23C;
          box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
        }
      }
    }
  }
}

// 设备状态指示器优化
.device-status {
  display: flex;
  align-items: center;
  
  .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    
    &.online {
      background-color: #67C23A;
      box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
      // animation: pulse 2s infinite, breathe 3s infinite; // 简化脉冲效果 - 移除动画
      
      &::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid rgba(103, 194, 58, 0.3);
        // animation: ripple 2s infinite; // 简化脉冲效果 - 移除动画
      }
    }
    
    &.offline {
      background-color: #F56C6C;
      box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #F56C6C;
        // animation: blink 3s infinite; // 简化脉冲效果 - 移除动画
      }
    }
    
    &.warning {
      background-color: #E6A23C;
      box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
      // animation: pulse 1.5s infinite, flash 2s infinite; // 简化脉冲效果 - 移除动画
      
      &::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid rgba(230, 162, 60, 0.3);
        // animation: ripple 1.5s infinite; // 简化脉冲效果 - 移除动画
      }
    }
  }
}

// 设备操作按钮
.device-actions {
  opacity: 0;
  transition: opacity 0.3s;
}

.device-item:hover .device-actions {
  opacity: 1;
}

// 设备列表项悬停效果
.device-item {
  transition: all 0.3s ease;
  border-radius: 6px;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: rgba(240, 242, 245, 0.5);
    
    .device-status .status-dot {
      transform: scale(1.2);
      
      &.online {
        box-shadow: 0 0 15px rgba(103, 194, 58, 0.8);
      }
      
      &.offline {
        box-shadow: 0 0 15px rgba(245, 108, 108, 0.8);
      }
      
      &.warning {
        box-shadow: 0 0 15px rgba(230, 162, 60, 0.8);
      }
    }
  }
}

// 设备统计百分比
.stat-percentage {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
  text-align: right;
}

// 异常详情区域样式
.anomaly-detail-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 420px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15), 
              0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 1000;
  overflow: hidden;
  animation: slideInRight 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  
  &.fade-out {
    animation: slideOutRight 0.4s cubic-bezier(0.75, 0, 0.85, 0.2) forwards;
  }
  
  // 添加内部光晕效果
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(100, 200, 255, 0.5), 
      transparent);
  }
  
  // 添加内部阴影
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    pointer-events: none;
    border-radius: 16px;
  }
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #60a5fa, #34d399);
    border-radius: 2px 0 0 2px;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  }
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    
    &::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #60a5fa;
      border-radius: 50%;
      margin-right: 12px;
      box-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
      // animation: pulse 2s infinite; // 简化脉冲效果 - 移除动画
    }
  }
}

.close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  
  &:hover {
    color: #fff;
    background-color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
  }
  
  &:active {
    transform: rotate(90deg) scale(0.95);
  }
}

.detail-content {
  padding: 22px 26px;
  max-height: 450px;
  overflow-y: auto;
  line-height: 1.7;
  color: #e2e8f0;
  
  strong {
    color: #60a5fa;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
  }
  
  div {
    margin-bottom: 14px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  pre {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
    margin-top: 10px;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-all;
    color: #cbd5e1;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: 1.5;
  }
}

// 异常详情动画
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
    filter: blur(2px);
  }
}

// 异常详情滚动条样式
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.4);
  border-radius: 3px;
  transition: background 0.2s;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.6);
}

// 倒计时指示器
.auto-close-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #60a5fa, #34d399);
  animation: countdown 8s linear forwards;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

@keyframes countdown {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

::-webkit-scrollbar{
  width: 0px;
}
</style>